React Select не разрешает множественный выбор

Question

У меня есть приложение реакции, которое я сейчас обновляю и которое включает переключение на реакцию 16.8 и обновление всех библиотек. У меня есть два раскрывающихся списка выбора в пользовательском интерфейсе материала, и из-за этой новой версии вариант множественного выбора больше не позволяет выбирать несколько вариантов, и я не могу понять, почему. Любые идеи будут оценены!

Код:

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const names = [
  'Oliver Hansen',
  'Van Henry',
  'Kelly Snyder',
];



export default function MultipleSelect() {
  const [personName, setPersonName] = React.useState([]);

  const handleChange = event => {
  console.log(event) //holds the selected option correctly
  setPersonName(event.target.value);
    console.log(personName) 
  };

  return (
    <div>
      <FormControl className={classname}>
        <Select
          multiple //used to be isMulti but this also no longer works
          value={personName}
          onChange={handleChange}  
          placeholder = {"choose a name"}
          options={names}
        >
        </Select>
      </FormControl>
    </div>
  );
}

Answer 1

Это потому, что ваше значение всегда содержит одно строковое значение. Когда вы выбираете второй элемент, он заменяет первое значение новым. Вам необходимо назначить массив значений для значения prop с выбранными значениями. Pu sh выбранный элемент в ранее выбранном массиве значений и обновление состояния, а при удалении удалите это имя из этого массива.

export default function MultipleSelect() {
  const [selectedNames, setSelectedNames] = React.useState([]);

  const handleChange = event => {
   console.log(event) //holds the selected option correctly
   // if selection/addition
   setSelectedNames([...selectedNames, event.target.value]);
   
   // On removal,
   
   // setSelectedNames(selectedNames.filter(name => name !== event.target.value));
  };

  return (
    <div>
      <FormControl className={classname}>
        <Select
          multiple //used to be isMulti but this also no longer works
          value={selectedNames}
          onChange={handleChange}  
          placeholder = {"choose a name"}
          options={names}
        >
        </Select>
      </FormControl>
    </div>
  );
}

Answer 2

Ваш options в настоящее время является одной строкой. Выбор ожидает что-то вроде этого (обратите внимание на значение и свойства метки):

[
  {value: 1, label: "Oliver Hansen"},
  {value: 2, label: "Van Henry"},
  {value: 3, label: "Kelly Snyder"}
]

Если у вас есть это для того, чтобы ваш выбор работал должным образом.

Answer 3

Установить истинное значение атрибута multiple:

   <Select
              multiple="true"
             // ...
            >
              // ...
            </Select>