React组件中的Multiselect-如何使用所有选定值设置状态？

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中会从FIRST SELECTED OPTION中获得该值，所以当我按此顺序选择控制台中的Taras，Ogród，Loggia时，我有（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);
  };