从引导程序形式中进行多选-React Hooks

Question

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

如果我第一次点击/选择产品，console.log会显示正确的结果。然而，如果我点击两次或两次以上，我会得到错误：

类型错误：无法读取空的属性"value">

我尝试了两种不同的策略，但都失败了(检查函数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>
);
}

Answer 1

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-合并

https://codesandbox.io/s/zealous-haibt-hp6mp

Answer 2

嗨，你检查文档了吗？也许您必须添加event.persist()，因为您正在处理function中的event。

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)
}

Answer 3

我想你可以试试onChange={addSelectedProducts}而不是onChange={(event) => addSelectedProducts(event)}