标签: react-hook-form

我正在将react-hook-form与typescript和material-ui一起使用。我想将错误消息作为helperTextto传递TextField。我尝试使用这样做， helperText={errors.email?.message} 但打字稿抱怨这个作业。

Property 'email' does not exist on type 'NestDataObject<FormData>'.ts(2339)

我不想从我的 .eslintrc 文件中禁用此规则，因为它可能会忽略我的应用程序中的其他类似问题，而这在某些地方可能是需要的。将react-hook-form的错误消息作为helperText分配给material-ui组件的正确方法是什么？

codesandbox 链接 https://codesandbox.io/s/material-ui-react-form-hook-yi669

我使用以下代码创建带有表单验证的登录页面：

import React from 'react';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { useForm } from 'react-hook-form';

class SignIn extends React.Component {
  
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(errors);

  render() {
    return (
      <div>
        <Form onSubmit={handleSubmit(onSubmit)}>

            <Label>Email : </Label>
            <Input type="email" placeholder="email" name="email" ref={register({required: true, pattern: /^\S+@\S+$/i})}></Input>

            <Label>Password : </Label>
            <Input type="password" placeholder="password"  name="password" ref={register({required: true, min: 8, maxLength: 20})}></Input>

        </Form>
      </div>
    );
  }
}


export default SignIn; …

我是 REACT-HOOK-FORM 的新手。我创建了一个个人资料页面，需要在其中创建两个单独的表单。一次用于“更改密码”，另一次用于“个人资料更改”。我正在努力通过 REACT-HOOK-FORM 创建两个单独的表单并利用它来提供验证。

const { handleSubmit, errors, control, reset, setValue } = useForm({
mode: "onSubmit",
reValidateMode: "onChange",
defaultValues: "",
validateCriteriaMode: "all",
submitFocusError: true,
nativeValidation: false,
});

我需要对上面的代码进行一些编辑吗？请帮忙。

我一直在尝试使用 React-hook-form 和 Chakra UI 组件库在 Next.js 中实现登录表单，但我无法弄清楚为什么我的表单验证错误消息不会显示，尽管遵循了 React-hook-形成文档相当彻底。我将其设置为用户名必须为 2-30 个字符长，密码必须至少为 8 个字符长；两个输入字段都是必需的。提交有效的表单后，将弹出一条警报，表示提交成功。然而，在提交无效表单时，错误消息应显示在无效输入下方，但事实并非如此。然而，我注意到无效的输入字段将在提交时获得焦点。

这是我正在查看的内容：https ://codesandbox.io/s/quirky-wave-jgpwf

提前致谢。

我正在尝试基于对象数组构建表单列表，这些对象具有应该能够编辑并呈现为输入的字段，以及不需要呈现的只读字段，例如 id。

我通过使用useFieldArray钩子来做到这一点。然而，react hook 似乎只保存那些注册为输入的字段，这导致我的 id 字段在提交处理程序中丢失。

如何保留我的只读字段？

这是沙箱示例，这样您就可以明白我在说什么。我将 id 添加到默认值和附加值。当您单击提交时，ID 不再存在。

我react-query与 结合使用react-hook-form。为了isSubmitting在提交时激活表单上的 prop 并显示加载状态，mutate 函数需要返回一个 Promise，而不是mutate直接使用。

目前我的解决方法如下：

const { mutate } = useMutation(...);

const update = (data) => {
    return new Promise((resolve, reject) => {
      mutate(data, {
        onSuccess: resolve,
        onError: reject,
      });
    });
};

然后传递update到methods.handleSubmit来自表单。

有人可以分享一些关于这个主题的经验吗？谢谢！

我正在尝试写一个习惯onChange和watch变化。

错误：

观看者myValue不会注册下拉列表中的更改。有什么想法吗？

根据API 文档，可以通过执行以下操作来实现：

export default function App() {
  const { register, watch } = useForm();

  const fruits = register("fruits");

  const myValue = watch("fruits", "default");

  return (
    <div className="App">
      <h1>{myValue}</h1>
      <select
        onChange={(e) => {
          fruits.onChange(e); // react hook form onChange
          console.log("Here would go the my onChange"); // my onChange
        }}
        onBlur={fruits.onBlur}
        ref={fruits.ref}
      >
        <option value="1Banana">Banana</option>
        <option value="1Kiwi">Kiwi</option>
        <option value="1Mango">Mango</option>
      </select>
    </div>
  );
}

您可以在这里找到上面的示例：

https://codesandbox.io/s/divine-rgb-mwiqn?file=/src/App.js

阿门德

我有一个使用 Material UI、react-hook-from 的表单，是的。

该表单具有三组无线电组（例如：radio-g1、radio-g2、radio-g3），并且用户必须从 radio-g1、radio-g2 中至少选择两个选项。此外，如果他们从 radio-g2 中选择“其他”选项，则会显示另一个必填字段 radio-g3。

最后，radio-g3 在隐藏时不是强制性的。

任何帮助将不胜感激。这是一些示例代码：

const schema = yup.object().shape({
  radioG1: yup.string().required("Please select an Avenger"),
  radioG2: yup.string().required("Please select an Avenger"),
  radioG3: yup.string().required("Please select an Avenger")
});

const App = () => {
  const [show, setShow] = useState(false);

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

  const {
    handleSubmit,
    control,
    formState: { errors }
  } = methods;

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <FormProvider {...methods}>
      <form …

我有这段代码，我正在尝试使用 React-hook-form 连接Headless UI中的Combobox 组件。每当我尝试输入不同的值并选择不同的选项时，都会出现错误消息 - Cannot read properties of undefined (reading 'name')

我尝试了很多不同的变体，但未能使用Comboboxwith register。任何帮助，将不胜感激。我想用它register来完成这项工作，并且不想使用其他Controller方法来实现react-hook-form.

import React from "react";

import { useState } from "react";
import { Combobox } from "@headlessui/react";
import { useForm } from "react-hook-form";

const people = [
  { id: 1, name: "Durward Reynolds" },
  { id: 2, name: "Kenton Towne" },
  { id: 3, name: "Therese Wunsch" },
  { id: 4, name: "Benedict …

我将Ant Design版本从4升级到5，并将Moment替换为Day.js，然后遇到了这个错误。

const {
    field,
    fieldState: { error },
  } = useController({ name: name, control: control });

  return (
    <div>
      <RangePicker
        style={error ? errorStyle : defaultStyle}
        format={customFormatList}
        suffixIcon={<BsCalendarDate className="text-lg" />}
        value={field.value}
        onChange={(e) => {
          field.onChange(e);
        }}
        onBlur={() => {
          field.onBlur();
        }}
        onCalendarChange={(e) => {
          field.onChange(e);
        }}
        {...rest}
      />
      {error && <p className="text-sm text-[#ff4d4f]">{error.message}</p>}
    </div>
  );

然后，我使用react-hook-form设置默认值：

 const { control, handleSubmit, setValue, watch } = useForm<SearchFormInputValues>({
    defaultValues: {
      requestDate: [dayjs(), dayjs()],
    },
    resolver: yupResolver(schema),
  });

...
<DateRangePicker
   name="requestDate"
   control={control}
   placeholder={["dd-mm-yyyy", "dd-mm-yyyy"]}/> …