我想将该函数传递setValue()给子组件。然后我收到以下错误消息：

Type 'UseFormSetValue<Inputs>' is not assignable to type 'UseFormSetValue<Record<string, any>>'

如何正确传递函数？

沙盒示例

function App() {
  const {
    register,
    setValue,
  } = useForm<Inputs>({
  });

  return (
    <form>
      <Field2 setValue={setValue} register={register} />
      <input type="submit" />
    </form>
  );
}

我正在使用 React Hook Form 库。https://react-hook-form.com

如果是像学生姓名和学生年龄这样的简单表格，那么申请就非常简单。

const { register, handleSubmit, formState: { errors } } = useForm();

我只是创建这两个输入字段并注册它们。

               <div className="w-full flex flex-col mt-4">
                  <label>Name</label>
                  <input
                    type="text"
                    placeholder="Enter Name" {...register("name")}
                  />

                </div>
                <div className="w-full flex flex-col mt-4">
                  <label>Age</label>
                  <input
                    type="text"
                    placeholder="Enter Age" {...register("age")}
                  />

                </div>
                <div>
                  <button onClick={handleSubmit(submitData)}>
                    Update
                  </button>
                </div>

SubmitData函数将获取formData可以使用的数据。将handleSubmit注册的字段绑定到formData

const submitData = async formData => {
  console.log(formData)
}

将formData如下所示：

{"name":"test", "age":"27"}

我的要求是通过允许我添加许多学生来使该表单动态化。我应该能够使用名为“添加学生”的按钮重复一组这些字段。每次我添加新学生时，都应该在这两个字段中创建一个新行，我可以在其中添加新学生姓名。最后，输出formData应该看起来像一个学生数组：

[{"name":"test1", "age":27},{"name":"test2", "age":28},{"name":"test3", "age":29} ]

我可以创建 …

我用了

• React-quill 是表单元素之一。
• React-hook-form 表单验证
• yup/yup 验证模式解析器

正常输入和文本区域按预期工作，但对反应羽毛笔的验证不起作用。

这些是我的代码片段。

自定义react-quill包装元素

import React, { useRef, useState } from "react";
import PropTypes from "prop-types";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import "react-quill/dist/quill.bubble.css";
import "react-quill/dist/quill.core.css";

function Editor(props) {
  const [theme, setTheme] = useState("snow");
  const { id, value, inputRef, placeholder, onChange } = props;

  return (
    <ReactQuill
      id={id}
      ref={inputRef}
      theme={theme}
      onChange={onChange}
      value={value}
      modules={{
        toolbar: {
          ...Editor.modules.toolbar,
          handlers: {
            //   image: handleImageUpload,
          },
        },
        ...Editor.modules,
      }}
      formats={Editor.formats}
      bounds={".app"}
      placeholder={placeholder ?? ""}
    />
  );
}

/* …

我有一个使用 Material UI 和 React-hook-form 的多步骤 (2) 表单。第一步，我要求输入字符串(Q1)和地址(Q2)。然后，用户单击“下一步”进入第二步。

此时，我使用 React context 将数据保存在全局状态中，并将其值传递到表单上的步骤 2，但是只有 Q1 的值被正确保存。Q2 的值保存为undefined.

简化代码

第 1 步页面

//imports here
const StepOne= () => {
  const { setValues } = useData();

  const methods = useForm({
    mode: "all",
    shouldUnregister: true
  });

  const { handleSubmit, control } = methods;

  const history = useHistory();

  const onSubmit = async (data) => {
    setValues({ address: data.address, other: data.other });
    history.push("/step2");
  };

  return (
    <MainConatiner>
      <Typography variant="h4" component="h2" …

我正在使用 Material UI 构建一个表单，并使用 React hook 表单进行验证。除了自动完成之外，它可以完美地使用反应钩子表单的控制器组件。虽然它捕获自动完成数据，但错误处理不起作用。我假设这是因为虽然错误对象是从 Controller => Autocomplete 向下传递的，但它不会向下传递到嵌套的 TextField 组件。如果我对自动完成组件进行错误验证，它也不起作用。有人解决了这个问题吗？我的组件代码如下

<Controller
                            name="categories"
                            control={control}
                            defaultValue=''                            
                            render={(props) => 
                                <Autocomplete
                                    className='formInputs'
                                    options={categories}
                                    renderInput={params => 
                                        <TextField
                                            name='autoCompleteTextField'
                                            {...params}
                                            // value={props.field.value}
                                            label="What do you do?"
                                            variant="outlined"
                                            rules={{
                                                required: {
                                                    value: true,
                                                    message: "Please tell us what you're an expert on. It helps us prioritize your referrals"
                                                }
                                            }}
                                            error={Boolean(props.fieldState.error)}
                                            onChange={(e, data) => props.field.onChange(data)}
                                            {...props}
                                        />
                                    }
                                />
                            }
                        />     

我正在制作一个表单，需要将react-dropzone与react-hook-form集成，为此，我基于Github上的讨论： https: //github.com/react-hook-form/react-钩子形式/讨论/2146。然而，在解构useFormContext时，如下：

const { control } = useFormContext();

我收到以下错误：

TypeError: Cannot destructure property 'control' of 
'(0 , react_hook_form__WEBPACK_IMPORTED_MODULE_2__.useFormContext)(...)' as it is null.

我做了一些研究，发现了这个问题：react-hook-form empty context，开发人员遇到的问题与我的非常相似。找到的解决方案是

基本上我需要的只是在 webpack 配置中添加react-hook-form 作为外部库，现在 csb 正在工作:)

我对 webpack 知之甚少，尤其是 Nextjs 内部。但在研究和阅读文档之后，这是我的尝试：

/next.config.js

module.exports = {
  webpack: (config, options) => {
    config.externals.push({
      'react-hook-form': 'react-hook-form',
    });

    return config;
  },
  ...
}

但错误仍然是一样的。你知道我该如何解决这个问题吗？

所以我有一个注册表单react-hook-form，我想禁用它submit input并显示“正在登录...”消息。我已经控制台记录了isSubmitting渲染中的值，并true在我提交时显示，然后false不久之后显示，但是submit button表单中的值永远不会更新以反映isSubmitting状态。

我究竟做错了什么？这是 React Hook Form useFormState 文档

从我看来它应该有效吗？

提前致谢。

import { useState } from "react"
import { useForm, useFormState } from "react-hook-form"
import useAuth from "Hooks/useAuth"

const SignInForm = () => {
  const [firebaseError, setFirebaseError] = useState(null)
  const { signIn } = useAuth()
  const {
    register,
    handleSubmit,
    resetField,
    control,
    formState: { errors },
  } = useForm()

  const { isSubmitting, isValidating } = useFormState({ …

我正在使用 React-Hook-Form 和 Material-UI 构建一个表单。每个 Material-UI 表单组件都被包装到一个react-hook-form Controller 组件中。

用户可以选择在单击按钮时使用不同的预定义值集自动填充表单。我正在尝试使用它setValue()来实现这一点，它似乎对于文本输入和选择工作得很好。但是，对于自动完成，尽管提交表单时已正确发送新值，但不会呈现新值。此外，当呈现文本区域时，内容似乎与标签混合在一起。

这是一个完整的示例： CodeSandbox 链接

问题

我想以可由用户添加的表单实现输入字段的键/值对。

• 请参阅动态字段上的动画 gif。

另外，我想在用户提交表单并再次显示页面时显示保存的数据。

• 请参阅有关显示保存的动态字段的动画 gif。

前提条件

• 我正在使用react-hook-form V7(RHF) 及其useFieldArray钩子。
• 当我使用 Material-UI 时，我必须使用controlled components.

工作溶液

在一个简化的应用程序中，我有一个使用useForm钩子的父组件和两个子组件，一个用于演示保存普通表单字段，另一个<ArrayFields />组件用于保存数组字段。

昨天我通过这个答案了解到，一种方法是在父级的 useForm 挂钩中设置对象，defaultValues如下所示：

const methods = useForm({
    defaultValues: {
      email: "john.smith@example.com",
      firstName: "John",
      lastName: "Smith",
      systemRole: "Admin",
      envRoles: [                             // <-- saved dynamic fields
        { envName: "foo1", envRole: "bar1" },
        { envName: "foo2", envRole: "bar2" }
      ]
    }
  });

在这里您可以看到此工作解决方案的代码和框。

问题

尽管如此，我想知道是否无法 …

我有一组复选框和一组 if radios，我想使用 React hook 表单进行验证，以确保如果提交时未选择任何复选框，则会生成错误消息。

我尝试过在他们的网站上尝试使用表单生成器，但我无法弄清楚如何将一组项目作为单个验证单元进行验证。

<div>
  <span>Option A <input type="checkbox" value="A" /></span>
  <span>Option B <input type="checkbox" value="B" /></span>
  <span>Option C <input type="checkbox" value="C" /></span>
</div>
<...output a validation error if one or more checkboxes hasnt been checked within the group>

<div>
  <span>Option A <input type="radio" value="A" /></span>
  <span>Option B <input type="radio" value="B" /></span>
  <span>Option C <input type="radio" value="C" /></span>
</div>
<...output a validation error if one or more radios hasnt been checked within the group>

这可能吗？有正确的方法吗？

感谢您的时间和关注。