React Select 不允许多选答案

【问题标题】：React Select not allowing multiple selectionsReact Select 不允许多选
【发布时间】：2020-01-27 13:46:03
【问题描述】：

我有一个我目前正在更新的 react 应用程序，其中涉及切换到 react 16.8 并更新所有库。我从材质 UI 中有两个下拉选择，由于这个新版本，多选一个不再允许选择多个选项，我不知道为什么。任何想法将不胜感激！

代码：

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

【问题讨论】：

这能回答你的问题吗？ Material UI Select Field multiselect
@PrakashKarena 这是同一个问题，但答案已过时，不适用于此版本的 react/material ui，因此唯一的答案不起作用

标签： javascript reactjs material-ui

【解决方案1】：

这是因为您的值始终包含单个字符串值。当您选择第二个项目时，它会用新项目覆盖第一个值。您需要使用选定的值将一组值分配给 value prop。将所选项目推送到先前选择的值数组中并更新状态，并在删除时从该数组中删除该名称。

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

【讨论】：

刚刚意识到在 setSelectedNames 上应该是 ...selectedNames, event.target.value 而不是 ...setSelectedNames。然后就可以了！如果你想更新你的答案来交换这个我会把它标记为接受:) 感谢您的帮助！

【解决方案2】：

为multiple属性设置真值：

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

【讨论】：

他已经在使用multiple="true"，因为任何prop的默认值都是true
可以确认这没有区别，但感谢您的尝试
是的，这没什么区别，但我使用的是 react-validator。它代表了不同的行为。因此，我试图回答。
如果您使用的是标准选择字段，则需要这样设置（与此问题无关，但此答案对我有帮助）

【解决方案3】：

您的options 目前是单个字符串。 Select 需要这样的东西（注意 value 和 label 属性）：

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

如果你有这样的顺序，你的选择应该按预期工作。

【讨论】：