Question

我正在使用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事件来处理所有多个select下拉列表。任何帮助或建议，不胜感激。

Answer 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

材质用户界面多项选择|如何对数组使用多重选择

1 个答案: