材质 UI 多个 Select | 如何将多个 Select 与 arrays 一起使用

Question

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

我在这里的例子： codesandbox

在我的示例中，我想为多个 select 下拉菜单使用 2 个 arrays，每个下拉菜单使用 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事件来处理所有多个 select 下拉列表。 非常感谢任何帮助或建议。

Answer 1

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

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

对于每个 select 我们必须给出名称

<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