标签: react-hook-form

我是反应钩子形式的新手。我在下面粘贴我的代码

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

const Inventory = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        className="border border-gray-900 rounded-lg p-2"
        type="number"
        placeholder="Number"
        ref={register("number", { required: true })}
      />
      {errors.number && <p>This is required</p>}
      <button
        className="mt-4 text-white bg-gray-900 border-2 border-gray-900 rounded-md px-2 py-1"
        type="submit"
      >
        Add
      </button>
    </form>
  );
};

export default Inventory;

当我提交表单时，我在控制台中没有得到任何输出。我还收到警告

Warning: Unexpected …

我正在尝试使用 ChakraUI 和 React-Hook-Form 在 TypeScript 中创建我的表单。然而，我的错误似乎给我带来了与打字稿相关的问题。我从 chakra 网站上提供的 chakra ui/react-hook-form 模板复制粘贴了这段代码。这是代码：

import {
  Box,
  Heading,
  FormErrorMessage,
  FormLabel,
  FormControl,
  Input,
  Button,
  Text,
  FormHelperText,
} from '@chakra-ui/react'
import React from 'react'
import styles from '../../theme/styles'
import textStyles from '../../theme/text-styles'
import { useForm } from 'react-hook-form'

const DescribeCargo = () => {
  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
  } = useForm()

  function onSubmit(values: any) {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(JSON.stringify(values, null, 2))
        resolve(values) …

我正在尝试使用 React-Hook-Form 和 React-Query 制作一个表单，只要用户更改任何字段（去抖），它就会自动保存。我已经很接近了，但是当我变异时它会产生无限循环。这是我所拥有的：

"@tanstack/react-query": "^4.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.34.2",

import React from 'react'
import { useMutation, useQuery } from '@tanstack/react-query'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as Yup from 'yup'
import debounce from 'just-debounce-it'

type NameType = {
    id: number
    firstName: string
    lastName: string
}

const schemaValidation = Yup.object().shape({
    id: Yup.number().required('Required'),
    firstName: Yup.string().required('Required'),
    lastName: Yup.string()
        .min(2, 'Must be greater than 1 character')
        .max(50, 'Must be less than 50 …

上下文：我正在使用react-hook-forms 创建文本字段列表（由控制器控制）。我发现我正在编写相当多的类似代码，并考虑创建一个通用文本字段。

我的问题有两个：

1. 如何传递填充name文本字段的界面属性？
2. 如何通过 props 成功传递通用对象类型以在利用 React-hook-forms 的组件中使用？

我的代码如下：

interface GenericTextfieldProps<T extends FieldValues> {
    formLabel: string;
    name: keyof T;
    control: Control<T>;
};

function GenericTextfield<T extends FieldValues>({
    formLabel,
    name,
    control,
}: GenericTextfieldProps<T>) {
    return (
        <Stack direction="column" spacing={0.5}>
            <Controller
                render={({ field }) => (
                    <TextField
                        {...field}
                        id="textfield"
                        label=""
                        size="small"
                        fullWidth
                        sx={{ ml: 3 }}
                        disabled
                        variant="outlined"
                    />
                )}
                name={name}
                control={control}
            />
        </Stack>
    );
}

但是，当我翻译代码以使其更加通用（即通过通用类型进行解析）时， name={name}开始抛出以下字符串错误：

Type 'keyof T' is not assignable to type 'Path<T>'.

对于第一季度： …

我正在尝试为具有复选框选择的表单添加验证，每个复选框旁边都有一个数字输入。用户选择一个职业复选框，然后在旁边的输入中输入他们拥有的经验年数。该数组如下所示（经验默认值为 1）：

const fieldsOfEng = [
  {
    id: "ELECTRICAL",
    name: "Electrical",
    experience: 1,
  },
  {
    id: "MECHANICAL",
    name: "Mechanical",
    experience: 1,
  }
]

如果我只是验证用户是否选择了我的专业数组中的选项之一，则架构将如下所示

export const userInfoSchema = z.object({
  professions: z
    .string()
    .array()
    .refine((val) => val.some(profession => 
      fieldsOfEng
        .map((field) => field.name)
        .includes(profession)))
})

通过react-hook-form注册输入，例如：

{fieldsOfEng.map((field) => {
     return (

     <input
      {...register("professions")}
      value={field.name}                               
      type="checkbox"
     />

   )}

- - - - - - - - - - 我想要的是：

我想在我的架构中添加一个“经验”字段，所以它看起来像这样（但这不正确）：

  professions: z
    .array(
      z.object({
        name: z.string(),
        experience: z.number(),
      })
    )
    .refine(({name}) =>
      name.some(({ …

我一直在使用带有本机元素的 react 钩子表单库，但想切换到使用控制器 API 的自定义组件。

我的自定义输入组件更新 React 状态但未更新表单状态内的 ref 时遇到问题。因此，必填字段始终标记为无效，我无法提交表单。

这是我的问题的演示：https : //codesandbox.io/s/react-hook-form-controller-bofv5

它应该在提交时注销表单数据 - 但提交永远不会发生，因为表单无效。

我正在使用reach hooks并验证我正在使用的表单字段，react-hook-form因为它是目前的最佳选择

所以为了验证我ref={register({ required: true })}在提交时所做的正常输入字段，它正在检查错误，因为我正在从 react-hook-form 导入错误

但是当我对选择字段做同样的事情时，它没有检查错误对象

这就是我正在做的

<label htmlFor="func" className="form_label">
      Select function
    </label>
    <select name="func" ref={register({ required: true })}>
      <option selected disabled>
        Select function
      </option>
      <option value="5">Function 2</option>
      <option value="6">Function 3</option>
    </select>
    {errors.func && (
      <div>
        <span>Function is required</span>
      </div>
    )}

我不知道我错过了什么

我的实际代码是动态数据

所以我像这样循环它

<Form.Control as="select" custom>
                    <option disabled selected>Select role</option>
                    {loading === false &&
                    data.get_roles.map((li) => (
                    <option value={li.user_type_id}> 
                    {li.user_type}</option>
        ))}
            </Form.Control>

反应钩子形式

基本上就是标题所说的。当我提交表单时，我正在检查登录是否成功，如果没有，它会显示一条消息。但是，当用户开始键入时，我希望此消息消失。

有点假设isDirty一旦提交表单就会被清除，但它仍然很脏。我可以reset从调用onSubmit，但这将清除表单的内容 - 我不想要。

想法？

所以我试图为我的表单注册一些单选按钮，但它不会注册。

<FormControl component="fieldset" inputRef={register({ required: true })}>
  <FormLabel component="legend">Promoting</FormLabel>
  <RadioGroup aria-label="promoting" name="promoting" value={promoting} onChange={handleChange} inputRef={register({ required: true })}>
    <FormControlLabel value="business" control={<Radio  />} label="Business" />
    <FormControlLabel value="nonprofit" control={<Radio />} label="Non-Profit" />
    <FormControlLabel value="event" control={<Radio  />} label="Event" />
  </RadioGroup>
</FormControl>

我想知道我做错了什么

完整代码

export default function BuildAd() {
  const [promoting, setValue] = React.useState('female');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

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

  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <div style={{ padding: 16, margin: …

使用时react-hook-form我需要将任意数据传递到onSubmit函数中。示例代码：

function App() {
  const { register, handleSubmit } = useForm();
  const navigation = { foo: 'bar' }; // object to pass
  const onSubmit = (data) => {
    // how to access navigation here?
    console.log(data);
    console.log(navigation); // undefined
  }; 
  return (
    <form onSubmit={handleSubmit(onSubmit)}> // <<== pass navigation here as arg? 
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

我怎样才能把我的对象navigation为onSubmit？