引导形式中的多选-React Hooks

2024-05-03 • 问答

我有一个产品列表，我希望用户能够从列表中选择一个或多个。

如果我是第一次单击/选择产品，则console.log显示正确的结果。但是，如果我单击两次或更多次，则会收到错误消息：

TypeError：无法读取null的属性“值”

我尝试了两种不同的策略，但是都失败了（检查功能addSelectedProducts）：

第一个解决方案

function SearchProductForm() {
    const [selectedProducts,setSelectedProducts] = React.useState([]);

    function handleSubmit(event){
        event.preventDefault();
        }

    function addSelectedProducts(event) {
        console.log(event.target.value)
        setSelectedProducts(oldArray => [...oldArray,event.target.value]);
        console.log(selectedProducts)
    }

        return (
            <div>
                <Form>
                    <Form.Group controlId="exampleForm.ControlSelect2">
                        <Form.Label>Select the product(s) you are interested about:</Form.Label>
                        <Form.Control as="select" multiple onChange={(event) => addSelectedProducts(event)}>
                            <option value="product1">product1</option>
                            <option value="product2">product2</option>
                            <option value="product3">product3</option>
                            <option value="product4">product4</option>
                            <option value="product5">product5</option>
                        </Form.Control>
                    </Form.Group>
                    <Button variant="primary" type="submit" onClick={()=>handleSubmit()}>
                        Submit
                    </Button>
                </Form>
            </div>
        );
    }

export default SearchProductForm;

第二个解决方案

function SearchProductForm() {
    const [selectedProducts,setSelectedProducts] = React.useState([]);

function handleSubmit(event){
    event.preventDefault();
    }

function addSelectedProducts(event) {
    let options = event.target.options
    for (var i = 0,l = options.length; i < l; i++) {
        if (options[i].selected) {
            setSelectedProducts(oldArray => [...oldArray,event.target.value]);
            console.log(selectedProducts)

        }
    }
}

    return (
        <div>
            <Form>
                <Form.Group controlId="exampleForm.ControlSelect2">
                    <Form.Label>Select the product(s) you are interested about:</Form.Label>
                    <Form.Control as="select" onChange={(event) => addSelectedProducts(event)} multiple>
                        <option value="product1">product1</option>
                        <option value="product2">product2</option>
                        <option value="product3">product3</option>
                        <option value="product4">product4</option>
                        <option value="product5">product5</option>
                    </Form.Control>
                </Form.Group>
                <Button variant="primary" type="submit" onClick={()=>handleSubmit()}>
                    Search
                </Button>
            </Form>
        </div>
    );
}

里卡多（Ricardo）在他们的答案中提到了事件池，但是我想提出一个不需要持久化事件的解决方案，这对我来说有点代码错误。

您可以一次抓住所有选定的选项，然后进行设置，而不必尝试将新状态与旧状态合并。

function addSelectedProducts(event) {
  // Alternative if you need to target ie
  // const selectedOptions = [...event.target.options].filter(o => o.selected).map(o => o.value)

  const selectedOptions = [...event.target.selectedOptions].map(o => o.value)

  setSelectedProducts(selectedOptions)
}

您遇到上述错误的原因是

setSelectedProducts(oldArray => [...oldArray,event.target.value]);

是异步的，并且在调用回调时，您的事件不再存在。在此处查看更多信息：https://reactjs.org/docs/events.html#event-pooling

https://codesandbox.io/s/dank-thunder-12be3

您好，您检查了docs吗？也许您必须添加event.persist()，因为您正在event内处理function。

 function addSelectedProducts(event) {
        event.persist()
        console.log(event.target.value)
        setSelectedProducts(oldArray => [...oldArray,event.target.value]);
        console.log(selectedProducts)
    }

其他解决方案可能涉及将变量设置为event.target.value：

 function addSelectedProducts(event) {
        let value = event.target.value;
        console.log(event.target.value)
        setSelectedProducts(oldArray => [...oldArray,event.target.value]);
        console.log(selectedProducts)
    }

我认为您可以尝试使用onChange={addSelectedProducts}代替onChange={(event) => addSelectedProducts(event)}

引导形式中的多选-React Hooks

lan_o_han 回答：引导形式中的多选-React Hooks

大家都在问