React Component中的多选-如何使用所有选定的值设置状态

Question

我在将所有选定的值添加到状态(钩子(时遇到问题。这是我的代码示例：

<div className="row">
<div className="input-field col s12">
<select multiple onChange={props.handleSelectedMultiple} id="balcony">
<option value="" disabled>
Brak
</option>
<option value="Balkon">Balkon</option>
<option value="Taras">Taras</option>
<option value="Ogród">Ogród</option>
<option value="Loggia">Loggia</option>
<option value="Taras na dachu">Taras na dachu</option>
</select>
<label>Balkon</label>
</div>
</div>

和功能：

const handleSelectedMultiple = e => {
console.log(e.target.value);
};

问题是，在console.log中，它是第一个选择选项的值，所以当我按这个顺序选择Taras、Ogród、Loggia时，在console中我有(3(个Taras。目标是将所有选定的值添加到状态。

有人吗？

Answer 1

您需要计算所选的选项。你可以做一些类似的事情

const handleSelectedMultiple = evt => {
const values = Array.from(evt.target.selectedOptions, option => option.value);
// Or this way
// const values = [...evt.target.selectedOptions].map(opt => opt.value)
console.log('values', values);
};