材质 UI 多选 |如何将多选与数组一起使用答案

【问题标题】：Material UI Multiple Select | How to use Multiple Select with arrays材质 UI 多选 |如何将多选与数组一起使用
【发布时间】：2020-09-20 02:49:31
【问题描述】：

我正在使用 material-ui 多选，并根据Multiple Select 提供的文档创建了一个示例。

我的例子是：codesandbox

在我的示例中，我想为多个选择下拉菜单使用 2 个数组，每个数组 1 个。我试图通过更新handleChange 事件来实现这一点：

const handleChange = (event) => {
    setState(event.target.value);
  };

到：

const handleChange = event => {
    setState({ ...state, [event.target.name]: event.target.value });
  };

当我测试此更新时，我从下拉列表中单击任何名称并收到此错误：state.indexOf is not a function

我希望能够使用handleChange 事件来处理我的示例中的所有多选下拉菜单。非常感谢任何帮助或建议。

【问题讨论】：

请更改handleChange() :-> const handleChange = event => { console.log(event); setState(event.target.value); };

标签： javascript reactjs material-ui react-hooks

【解决方案1】：

在您的代码框中，您只使用了一个数组作为状态，应该将其更改为两个

  const [state, setState] = React.useState({ first: [], second: [] });

对于每个选择，我们必须给出名称

<Select
      labelId="demo-mutiple-checkbox-label"
      id="demo-mutiple-checkbox"
      multiple
      value={state.first}
      name="first"
      onChange={handleChange}
      input={<Input />}
      renderValue={selected => selected.join(", ")}
    >

这是有效的 csb 链接https://codesandbox.io/s/material-demo-s1g4h?file=/demo.js:1322-1618

【讨论】：