5

我正在尝试构建一个可以容纳多个“分组”复选框的表单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])

我怎样才能做到这一点？

这是我试图重现该问题的示例。

奖励点，使用 Yup 验证最小选定复选框

boat_ids: Yup.array() .min(2, "")

4

4 回答 4

8

我也一直在为此苦苦挣扎，这对我有用。

更新了 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>
  );
}

Codesandbox 链接：https ://codesandbox.io/s/material-demo-54nvi?file=/demo.js

另一个默认选定项目的解决方案没有完成useState： https ://codesandbox.io/s/material-demo-bzj4i?file=/demo.js

于 2020-05-04T13:54:29.243 回答
7

在 6.X 中进行的重大 API 更改：

  • 验证选项已更改为使用解析器函数包装器和不同的配置属性名称
    注意：文档只是针对validationResolver->resolver 进行了修复，并且repo 中用于验证的代码示例尚未更新（仍validationSchema用于测试）。感觉好像他们不确定要对那里的代码做什么，并且处于不确定状态。我会完全避免使用他们的 Controller 直到它稳定下来，或者使用 Controller 作为您自己的表单 Controller HOC 的薄包装器，这似乎是他们想要进入的方向。
    查看官方沙盒演示和"false"value 作为字符串的意外行为复选框供参考
import { yupResolver } from "@hookform/resolvers";

  const { register, handleSubmit, control, getValues, setValue } = useForm({
    resolver: yupResolver(schema),
    defaultValues: Object.fromEntries(
      boats.map((boat, i) => [
        `boat_ids[${i}]`,
        preselectedBoats.some(p => p.id === boats[i].id)
      ])
    )
  });
  • Controller不再原生处理 Checkbox ( type="checkbox")，或者更好地说，不正确地处理值。它不检测复选框的布尔值，并尝试将其转换为字符串值。你有几个选择：
  1. 不要使用Controller. 使用不受控制的输入
  2. 使用新render道具为您的复选框使用自定义渲染功能并添加 setValue 挂钩
  3. 像表单控制器 HOC 一样使用 Controller 并手动控制所有输入

避免使用控制器的示例：
https ://codesandbox.io/s/optimistic-paper-h39lq
https://codesandbox.io/s/silent-mountain-wdiov
与第一个原始示例相同，但使用了yupResolver包装器

5.X 说明：

这是一个不需要 Controller 的简化示例。不受控制的是文档中的建议。仍然建议您为每个输入提供自己name的数据并对数据进行转换/过滤以删除未检查的值，例如在后一个示例中使用 yup 和 validatorSchema，但就您的示例而言，使用相同的名称会导致值被添加到符合您要求的数组中。
https://codesandbox.io/s/practical-dijkstra-f1yox

无论如何，问题是defaultValues您的复选框的结构不匹配。它应该是{[name]: boolean}，其中names生成的是文字字符串 boat_ids[${boat.id}]，直到它通过不受控制的表单输入，这些输入将值捆绑到一个数组中。例如：form_input1[0] form_input1[1]发出form_input1 == [value1, value2]

https://codesandbox.io/s/determined-paper-qb0lf

构建defaultValues: { "boat_ids[0]": false, "boat_ids[1]": true ... }
控制器需要布尔值来切换复选框值，并将其作为默认值提供给复选框。

 const { register, handleSubmit, control, getValues, setValue } = useForm({
    validationSchema: schema,
    defaultValues: Object.fromEntries(
      preselectedBoats.map(boat => [`boat_ids[${boat.id}]`, true])
    )
  });

用于 validationSchema 的模式，用于验证至少选择了 2 个，并将数据转换为所需的模式，然后再将其发送到 onSubmit。它会过滤掉错误值，因此您会得到一个字符串 id 数组：

  const schema = Yup.object().shape({
    boat_ids: Yup.array()
      .transform(function(o, obj) {
        return Object.keys(obj).filter(k => obj[k]);
      })
      .min(2, "")
  });
于 2020-05-01T11:43:07.863 回答
2

这是一个工作版本：

import React 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 { control, handleSubmit } = useForm({
    defaultValues: {
      bill: "bill",
      luo: ""
    }
  });

  return (
    <form onSubmit={handleSubmit(e => console.log(e))}>
      {["bill", "luo"].map(name => (
        <Controller
          key={name}
          name={name}
          as={
            <FormControlLabel
              control={<Checkbox value={name} />}
              label={name}
            />
          }
          valueName="checked"
          type="checkbox"
          onChange={([e]) => {
            return e.target.checked ? e.target.value : "";
          }}
          control={control}
        />
      ))}
      <button>Submit</button>
    </form>
  );
}

代码沙盒链接：https ://codesandbox.io/s/material-demo-65rjy?file=/demo.js:0-932

但是，我不建议这样做，因为 Material UI 中的 Checkbox 可能应该返回选中的（布尔值）而不是（值）。

于 2020-05-04T02:16:10.643 回答
0

这是我的解决方案，它没有使用 Material UI 中的所有默认组件，因为在我的界面上，每个收音机都会有一个图标和文本，除了不显示默认项目符号点：

const COMPANY = "company";

const INDIVIDUAL = "individual";

const [scope, setScope] = useState(context.scope || COMPANY);

const handleChange = (event) => {
  event.preventDefault();

  setScope(event.target.value);
};

<Controller
  as={
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="scope"
        name="scope"
        value={scope}
        onChange={handleChange}
      >
        <FormLabel>
          {/* Icon from MUI */}
          <Business />

          <Radio value={COMPANY} />

          <Typography variant="body1">Company</Typography>
        </FormLabel>

        <FormLabel>
          {/* Icon from MUI */}
          <Personal />

          <Radio value={INDIVIDUAL} />

          <Typography variant="body1">Individual</Typography>
        </FormLabel>
      </RadioGroup>
    </FormControl>
  }
  name="scope"
  control={methods.control}
/>;

观察：在这个例子中，我使用没有破坏的 React Hook Form：

const methods = useForm({...})
于 2020-07-31T23:10:48.693 回答