reactjs - 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 中的值来自FIRST SELECTED OPTION，所以当我在控制台中按Taras、Ogród、Loggia 的顺序选择时，我有（3）Taras。目标是添加以声明所有选定的值。

任何人？

标签： reactjsformsselectmulti-select

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