取消选择带有初始值的 MUI Multi select

Question

我在 Formik 表单中遇到了 MUI Select（多个）问题。 假设我有一个任务存储在数据库中，其中taskName ， assignTo （人员数组）。 现在我正在尝试制作一个可以更新/更改assignTo值的表单。 所以表单得到了initialValues ：

const savedTask = {
  id: 1,
  name: "Task A",
  assignTo: [
    {
      id: 1,
      name: "Oliver Hansen",
      age: 32
    }
  ]
};

和人员名单

const personList = [
  {
    id: 1,
    name: "Oliver Hansen",
    age: 32
  },
  {
    id: 2,
    name: "Van Henry",
    age: 25
  },
  {
    id: 3,
    name: "Oliver",
    age: 27
  }
];

问题是我无法在更新表单中取消选择“Oliver Hansen”。 当我点击它时，它还增加了一个“奥利弗汉森”。

代码沙盒

我是否实施错误或者这就是 formik setFieldValues的行为方式？

Answer 1

从Select API 页面（ value道具） ：

...

如果该值为 object，则它必须与选项具有引用相等性才能被选中。 如果该值不是 object，则字符串表示必须与选项的字符串表示匹配才能被选中。

savedTask.assignTo和personList具有不同的 object 引用，即使它们具有相同的值，因此您必须使用Array.filter从personList中assignTo的初始值，如下所示：

const initValues = { 
  ...savedTask, 
  assignTo: personList.filter(person => savedTask.assignTo.some(obj => obj.id === person.id))
};

const formik = useFormik({
  initialValues: initValues,
  onSubmit: (values) => {
    console.log("values submit ", values);
  }
});

工作示例：

Answer 2

您可以选择设置 state 的初始值来重置它。 就我而言，我有一个列表并将值设置为占位符。

const [yearFrame, setYearFrame] = React.useState<string[]>([newDate]);
const handleYearFrame = (event: SelectChangeEvent<typeof yearFrame>) => {
        const { target: { value }, } = event;
        if (value === yearFrame[0]) {
            setYearFrame(["Select Year"]);
        }
        else {
            setYearFrame(
                typeof value === 'string' ? value.split(',') : value
            );
        }
    };

在文本字段中：

<FormControl style={{ width: "30vh", marginLeft: "2vh", marginTop: "2vh" }}>
  <InputLabel id="demo-multiple-name-label">Select Year</InputLabel>
    <Select
      value={yearFrame}
      onChange={handleYearFrame}
      input={<OutlinedInput label="Select Year" />}
      MenuProps={MenuProps}
    >
      {optionsYear.map((option) => {
        return (option.label === "Select Year" ? <MenuItem key= 
          {option.label} disabled value={option.label}><span style={{ color: 
          "rgb(156, 156, 156)" }}>{option.label}</span></MenuItem> : 
          <MenuItem key={option.label} value={option.label}>{option.label} 
           </MenuItem>)
         })}
   </Select>
</FormControl>

这是因为我正在重用逻辑并且具有与多选相同的文本字段，因此该值显示为列表。 如果您不使用多选，您可以将 state 设置为 null，它将自动呈现您的占位符。