带有 TypeScript MultiSelect 下拉列表的 MUI 不选择或更新值

Question

我一直在尝试构建一个带有复选框的多选下拉列表。下拉列表正在由 API 调用填充，我正在尝试更新一组值以写回数据库。 我可以填充下拉列表，但我似乎无法检查复选框或设置值。

这是我的下拉菜单：

import * as React from 'react';
import axios from 'axios';
import { Checkbox, FormControl, FormHelperText, InputLabel, Select, MenuItem, ListItemText, OutlinedInput } from '@material-ui/core';
import { FormControl, FormHelperText, InputLabel, Select, MenuItem, ListItemText, OutlinedInput } from '@material-ui/core';


export default function dropdownMultiSelect(props) {
  const { label, name, handleInputChange, prompt, value, url } = props;
  const [options, setOptions] = React.useState([]);

  // Fetch Data for Dropdown list
  React.useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(url);
      setOptions( res.data);
    };
    fetchData();
  }, []); 

  return (
      <FormControl variant='outlined' >
        <InputLabel>{label}</InputLabel>
        <Select
          multiple
          value={value}
          onChange={handleInputChange}
          renderValue={(selected) => selected.map((x) => x.name).join(', ')}
        >
          {options.map((option, id) => (
            <MenuItem
              key={option.id}
              value={option.id}
            >
              <Checkbox checked={value.includes(option.id)} />
              {option.name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
  );
}

我使用与表单其余部分相同的 onChange 事件来捕获输入更改并设置值。

OnChange 事件：

  const [values, setValues] = React.useState({} as any);
  const [errors, setErrors] = React.useState({} as any);

  const handleInputChange = e => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
    if (validateOnChange) { validate({ [name]: value }); }
  };

有人可以告诉我我做错了什么，这样我就可以让这个东西正常工作。

Answer 1

将名称添加到 MUI 多重选择可能会解决此问题。

由于 React 是一种单向绑定模式，请确保将正确的值传递回多选组件。

<Select
  multiple
  value={value}
  onChange={handleInputChange}
  renderValue={selected => selected.map(x => x?.name).join(', ')}
  name='nameYouLike'
>
  {options.map((option, id) => (
    <MenuItem key={option.id} value={option.id}>
      <Checkbox checked={value?.includes(option.id)} />
      {option.name}
    </MenuItem>
  ))}
</Select>

参考：https://mui.com/material-ui/react-select/#multiple-select