如何在 React 中设置 Material Ui 多选默认值？

Question

我想在多项选择中设置一些值，但该怎么做有人可以帮助我吗？ 和 valueSheet.userFullName 是所有用户的数组，我想设置一些值到下拉列表。预先感谢:)）

export default function MultipleSelectBox() {
  const valueSheet = useContext(ContextSheet);

  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event, key) => {
    const itemKey = key.key.slice(2);
    console.log("keyyy", itemKey);
    valueSheet.setUserUid(current => [...current, itemKey]);
    const { target: { value } } = event;
    setPersonName(
      typeof value === 'string' ? value.split(',') : value,
    );
    console.log("getSelectedValue", event.target.value);
  };

  return (
    <div>
      <InputLabel id="demo-simple-select-standard-label">Users List :</InputLabel>
      <FormControl sx={{ m: 1, width: 210 }} size="small">
        <InputLabel id="demo-multiple-checkbox-label">Users</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput label="Users" />}
          renderValue={(selected) => {
            console.log("selectedd", selected);
            return selected.map((s) => s.FullName).join(", ");
          }}
          MenuProps={MenuProps}
        >

          {valueSheet.userFullName.map((name) => {
            return (
              <MenuItem key={name.id} value={name}>
                <Checkbox checked={personName.indexOf(name) > -1} />
                <ListItemText primary={name.FullName} />
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </div>
  );
}

Answer 1

我通过添加新属性

isChecked

并引入了

renderValue

的模板来重构了您的代码示例：

renderValue={(selected) => {
        console.log("selectedd", selected);
        return selected.map((s, index) => (
          <div key={index}>
            <MenuItem key={"menuItem" + index} value={s.FullName}>
              <Checkbox key={"checkbox" + index} checked={s.isChecked} />
              <ListItemText
                key={"listItemText" + index}
                primary={s.FullName}
              />
            </MenuItem>
          </div>
        ));
      }}

因此可以使用

useState

:

设置所选值

const [personName, setPersonName] = React.useState([
    { id: 2, FullName: "john", isChecked: true },
    { id: 4, FullName: "havvana", isChecked: true }
]);

更新：

您选择值的逻辑应该被编辑。我的意思是你应该使用

setPersonName

选择或取消选择

select

控件中的值。代码如下所示：

const handleChange = (event, key) => {    
    const fullName = event.target.value.slice(-1).pop()
    console.log("fullName", fullName)

    const selectedPerson = usersList.find(u => u.FullName === fullName)
    console.log("selectedPerson", selectedPerson)
    if (selectedPerson && !personName.some(person=> person.FullName === fullName))
    {
       setPersonName(prevArray => [...prevArray, selectedPerson]) 
    } else {
      const updatedArray = personName.filter( p=> p.FullName !== fullName)
      setPersonName(prevArray => [...updatedArray]) 
    }

    console.log("event.target.value", event.target.value);
    console.log("personName", personName)
};

完整的codesandbox示例可以在这里看到。

Answer 2

我也面临着同样的问题。当我尝试使用对象列表设置默认值时，我无法取消选择默认值。

因此，我使用字符串列表设置默认值。这救了我。

const names = ['Oliver Hansen','Van Henry','April Tucker','Ralph Hubbard', 'Omar Alexander'];

 export function App(props) {
   const [personName, setPersonName] = React.useState(["Oliver Hansen","Van 
 Henry"]);

const handleChange = (event) => {
const {target: { value },} = event;
setPersonName(typeof value === 'string' ? value.split(',') : value);
};

 return (
<FormControl>
  <Select
    labelId="demo-multiple-checkbox-label"
    id="demo-multiple-checkbox"
    multiple
    value={personName}
    onChange={handleChange}
    input={<OutlinedInput label="Tag" />}
    renderValue={(selected) => selected.join(', ')}
    MenuProps={MenuProps}
  >
    {names.map((name) => (
      <MenuItem key={name} value={name}>
        <Checkbox checked={personName.indexOf(name) > -1} />
        <ListItemText primary={name} />
      </MenuItem>
    ))}
  </Select>
</FormControl>
 );
}