标签: react-hook-form

我从文档中获取了示例：

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

但在每次更改或提交时，我都会得到undefined每个字段

我尝试再次安装该库，但没有任何变化，并且到处都未定义......似乎是注册功能的问题。有人遇到同样的问题吗？

我正在尝试React-Hook-form

复选框的简单代码如下：

import React from 'react'
import { useForm } from 'react-hook-form'

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = (data: any) => console.log(data)
  console.log(errors)

  return (
    <div className='mx-auto justify-center p-32 flex'>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className='p-2'>
          <label htmlFor=''>January</label>
          <input
            type='checkbox'
            placeholder='January'
            {...register('January', {})}
            className='mx-3'
            checked
          />
        </div>
        <div className='p-2'>
          <label htmlFor=''>February</label>
          <input
            type='checkbox'
            placeholder='February'
            {...register('February', {})}
            className='mx-3'
          />
        </div>
        <input type='submit' />
      </form>
    </div>
  )
}

我可以正确提交表单，但我喜欢一月复选框作为复选框开始，但是当我如代码中所示放置“选中”时，我不知何故无法“取消选中”它。

我似乎错过了一些东西，任何帮助将不胜感激。

我对 typecipt 很陌生，并试图制作一个基本的引脚输入页面。我的代码的沙箱链接。虽然它可以工作，但我在第 10 行的 onChange 函数中收到此错误：

类型“Dispatch<SetStateAction<any[]>>”不可分配给类型“(values?: string) => void”。参数“value”和“values”的类型不兼容。类型“string”不可分配给类型“SetStateAction<any[]>”.ts(2322)

我正在导入react-hook-pin-input，但找不到任何在 ts 中使用 onChange 的演示。请帮我重写 onChange ，使 valueE 成为正在输入的值。可以在这里找到react-hook-pin-input的源代码 - https://github.com/elevensky/react-hook-pin-input

我正在尝试使用 React Hook Form（版本 7.6.6）构建一个表单。我创建了一个 FormInput 组件，如下所示：

const FormInput = ({ name, label }) => {
  const { control } = useFormContext();

   return (
    <Grid item xs={12} sm={6}>
      <Controller
        control={control}
        name={name}
        render={({ field }) => {
          return <TextField {...field} label={label} fullWidth required />;
        }}
      />
    </Grid>
  );

我在这里使用它：

<FormProvider {...methods}>
        <form onSubmit={handleSubmit((data) => console.log(data))}>
            <FormInput name="firstName" label="First Name" />
            <FormInput name="lastName" label="Last Name" />
            <FormInput name="address1" label="Address 1" />
            <FormInput name="email" label="Email" />
            <FormInput name="zip" label="ZIP code" />
       
         
          <Button
            type="submit" …

我在一个子组件中使用 useFormContext 。这是它的代码：

const { register } = useFormContext<CustomerProfileFormData>();

我如何模拟 useFormContext 以便我可以测试子组件。这是测试

it('should render properly', () => {
    render(<AddressDetails isEdit={false} />);
    expect(screen.getByTestId('address-details')).toBeInTheDocument();
});

我收到此错误 TypeError: Cannot destruct property 'register' of '(0 , _reactHookForm.useFormContext)(...)' 因为它是 null.Jest。

这是有道理的，因为我没有模拟 useFormContext 。我怎样才能模拟它？任何帮助将不胜感激。

我正在使用 React Hook Form v7，我试图使我的数据表单在页面重新加载时保持不变。我阅读了RHF官方文档，其中建议使用小状态机，我尝试实现它，但没有成功。有更好的方法吗？然而...

我使用它遇到的第一个问题是我的数据是一个复杂的对象，所以它updateAction应该不那么容易。

第二个问题是我不知道何时以及如何触发updateAction来保存数据。我应该在输入模糊时触发它吗？关于输入更改？

这是我的测试代码：