Мультиселект в 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, поэтому, когда я выбираю в этом заказать Тарас, Огруд, Лоджия, в консоли у меня есть (3) Тарас. Цель состоит в том, чтобы добавить в состояние все выбранные значения.

Кто-нибудь?

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