javascript - Material UI + React Form Hook + 多个复选框 + 默认选中

Question

我正在尝试使用 react-form-hook 构建一个可容纳多个“分组”复选框的表单Material UI .

复选框是从 HTTP 请求异步创建的。

我想提供一个对象 ID 数组作为默认值:
defaultValues: { boat_ids: trip?.boats.map(boat => boat.id.toString()) || [] }
此外，当我选择或取消选择复选框时，我想添加/删除 对象ID 到 react-hook-form 的值.

IE。 (boat_ids: [25, 29, 4])

我怎样才能做到这一点？

这是 sample我正在尝试重现该问题。

奖励点，使用 Yup 验证最小选定复选框
boat_ids: Yup.array() .min(2, "")

Answer 1

我也一直在为此苦苦挣扎，这对我有用。
更新了 react-hook-form v6 的解决方案，它也可以在没有 useState 的情况下完成(下面的沙箱链接):

import React, { useState } from "react";
import { useForm, Controller } from "react-hook-form";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";

export default function CheckboxesGroup() {
  const defaultNames = ["bill", "Manos"];
  const { control, handleSubmit } = useForm({
    defaultValues: { names: defaultNames }
  });

  const [checkedValues, setCheckedValues] = useState(defaultNames);

  function handleSelect(checkedName) {
    const newNames = checkedValues?.includes(checkedName)
      ? checkedValues?.filter(name => name !== checkedName)
      : [...(checkedValues ?? []), checkedName];
    setCheckedValues(newNames);

    return newNames;
  }

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {["bill", "luo", "Manos", "user120242"].map(name => (
        <FormControlLabel
          control={
            <Controller
              name="names"
              render={({ onChange: onCheckChange }) => {
                return (
                  <Checkbox
                    checked={checkedValues.includes(name)}
                    onChange={() => onCheckChange(handleSelect(name))}
                  />
                );
              }}
              control={control}
            />
          }
          key={name}
          label={name}
        />
      ))}
      <button>Submit</button>
    </form>
  );
}

密码沙盒链接:https://codesandbox.io/s/material-demo-54nvi?file=/demo.js
另一种默认选择项目的解决方案没有 useState :
https://codesandbox.io/s/material-demo-bzj4i?file=/demo.js