标签: react-hook-form

我使用的是react-hook-form V7.14.2，并且使用的是Material-UI复选框，用户可以手动检查该复选框，也可以根据某些输入的值自动检查该复选框。这工作正常。

问题是，在提交表单时，如果通过逻辑选中复选框，则根据某些输入的值，发送到后端的值将为 false。如果用户手动选中该复选框，那么它将发送正确的值。-如果选中则为真-。

我在react-hook-form页面中阅读了从V6迁移到V7的文档，因为我之前使用的是V6并且代码在那里工作。 https://react-hook-form.com/migrate-v6-to-v7/

我还阅读了 Stackoverflow 中以前的一些答案，例如：material-ui checkbox with react-hook-form但没有成功。

这是我的代码：

import React, { useContext, useState, useEffect } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { Controller, set } from "react-hook-form";
import { makeStyles } from "@material-ui/core/styles";
import { DarkThemeContext } from "../../context/DarkThemeContext";
import { useStylesSelectPropDetails } from "../../styledComponent/SelectPropDetailsStyled";
import { IMAGES_LINK } from "../../api/doFetch";

const useStylesLabel = makeStyles((theme) => …

我尝试在选择元素中使用 readOnly，以便用户无法更改输入字段的值，但在提交表单时，我仍然需要 Api 的该值，而且我听说这是在 React-hook 中执行此操作的唯一方法-form 是使用只读而不是禁用，它在正常输入字段中工作，但打字稿在选择元素中给出错误。这是代码：

interface dataProps {
  field_id: any;
  disabled: boolean;
}

<select
  readOnly={props.disabled}
  id={props.field_id}
  {...register(...)}
  defaultValue={...}
  onChange={...}
  >
  <option>
    {...}
  </option>
  renderList(...)
</select>

我尝试尽可能缩短代码，这是我得到的整个错误：

Type '{ children: any[]; defaultValue: any; onChange: (e: ChangeEvent<HTMLSelectElement>) => void; onBlur: ChangeHandler; ref: RefCallBack; name: string; readOnly: true; id: any; }' is not assignable to type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
  Property 'readOnly' does not exist on type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.

我阅读了react-hook-form的文档，但我没有看到任何有关使用的内容readOnly，我登陆了这个链接，当我尝试更改必须选择的输入时，readOnly它给出了相同的错误，有没有办法使那readOnly行得通，还是有一个解决方法可以使禁用的数据保存在handleSubmit？

我有一个预先填写的表格，由以下控制react-hook-form：

const {control, handleSubmit, formState, setValue, reset} = useForm<UserDetailsForm>({
  mode: 'onChange',
  defaultValues,
});
const {errors, isDirty, isValid} = formState;
...

提交按钮：

<Button
  variant="link"
  title="Save Changes"
  onPress={handleSubmit(handleProceed)}
  disabled={!isDirty || !isValid}
/>

返回时，我需要检查表单是否有未保存的更改，如果有则显示警报。

我该如何检查？我尝试检查formState变量，但它似乎不包含类似的内容。

我正在使用react-hook-form在我的react应用程序中创建表单。

一切正常，但我想在加载表单时显示所有错误消息，而不单击提交按钮。我检查了文档但找不到任何解决方案。

任何帮助和建议表示赞赏。

谢谢你！

我观察到如果我defaultValues像下面提到的

  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: "test",
      lastName: "test2"
    }
  });

并且不要安装lastName

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("firstName")} />
  <input type="submit" />
</form>

我懂了onSubmit

const onSubmit = (data) => {
  console.log(JSON.stringify(data, null, 4));
};

我看到以下内容

{
    "firstName": "test",
    "lastName": "test2"
} 

但我只想看到firstName因为我还没有安装lastName

{
    "firstName": "test",
} 

react-hook-form我正在和的帮助下创建一个带有文件上传的表单Yup。我正在尝试在我的子组件中使用 register 方法。当将寄存器作为道具传递时（在大括号中解构），验证和提交不起作用。您始终可以提交表单，并且提交的文件对象为空。这是一个沙盒链接。

尝试使用用react-hook-form Controller包装的Material UI中的RadioGroup，总是得到所选值null，这是我的代码，我想知道我错过了什么？

import * as React from "react";
import {
  FormControl,
  FormControlLabel,
  FormHelperText,
  Radio,
  RadioGroup
} from "@mui/material";
import { useState } from "react";
import { useFormContext, Controller } from "react-hook-form";

interface IOptionTypes {
  id: string;
  label: string;
  value: string;
  desc?: string;
}

interface IFormElementTypes {
  name: string;
  options: IOptionTypes[];
}

export default function RadioFieldElement({
  name,
  options
}: IFormElementTypes) {
  const {
    control,
    register,
    formState: { errors }
  } = useFormContext();

  return (
    <Controller
      name={name}
      defaultValue=""
      control={control}
      render={({ field …

希望使用带有 useEffect 的 React hook 表单来实时获取更改（当用户填写表单时），是否有一个原因导致 useEffect 在这里不被触发，如果是这样，有没有办法在表单数据时触发它变化？这里的示例来自https://remotestack.io/react-hook-form-set-update-form-values-with-useeffect-hook/

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

export default function SimpleForm() {
  const { register, handleSubmit, reset, formState } = useForm();

  const [student, initStudent] = useState(null);

  useEffect(() => {
    setTimeout(
      () =>
        initStudent({
          name: "Little Johnny",
          email: "lil@johnny.com",
          grade: "3rd",
        }),
      1200
    );
  }, []);

  useEffect(() => {
    console.log("updating.,..");

    reset(student);
  }, [reset, student]);

  function onFormSubmit(dataRes) {
    console.log(dataRes);
    return false;
  }

  return (
    <div>
      <h2 …

我正在开发下一个 js 项目，在刷新页面时出现此错误。但是，当我从头开始登录然后访问其他页面时，就不会出现此错误。但如果从 api 获取数据时出现任何错误，则会出现该错误。

这是完整的日志：

Uncaught Error: Cannot find module 'C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\@hookform\resolvers\yup\dist\yup'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
at resolveExports (node:internal/modules/cjs/loader:483:14)
at Module._findPath (node:internal/modules/cjs/loader:523:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:925:27)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at Module._load (node:internal/modules/cjs/loader:780:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
getServerError @ client.js?4d30:7
eval @ index.js?46cb:709
setTimeout (async)

这是我的 package.json：

{
 "name": "apsit-community",
 "author": "apsit",
 "version": "1.0.0",
 "description": "Platform build by students for the students.",
 "private": true,
 "scripts": {
   "lint": "next lint",
   "lint:es": "eslint --ext .js,.jsx .",
   "lint:fix": …

我的表单中有一个status = 'DRAFT' | 'READY'枚举字段，是否可以zod根据该字段的值更改 lib 中的验证？

// validation passed
{
  name: "John",
  surname: null,
  status: "DRAFT"
}

// validation failed
{
  name: "John",
  surname: null,
  status: "READY"
}

所以本质上如果从这里status === "READY"删除.min(1)

const schema = z.object({
  name: z.string(),
  surname: z.string().min(1),
  status: z.enum(["READY", "DRAFT"])
});