标签: react-hook-form

你能告诉我为什么我收到错误“一个组件正在改变一个不受控制的自动完成来控制。元素不应该从不受控制切换到受控制（反之亦然）。决定在整个生命周期内使用受控制或不受控制的自动完成元素组件。”

成分 ：

function AutoComplete(props) {

  const defaultProps = {
    options: props.options,
    getOptionLabel: option => option.name,
  };

  const handleChange = (e, value) => {
    props.onChange(value);
  };

  return (
    <Autocomplete
      {...defaultProps}
      renderInput={params => (
        <TextField {...params} label={props.label} margin="normal" />
      )}
      onChange={handleChange}
      value={props.value}
    />
  );
}

调用自动完成：

               <Controller
                control={control}
                name = 'country'
                as = {
                  <AutoComplete
                    options={countryOptions}
                    onChange={selectCountryHandler}
                    label="Country"
                    value={selectedCountry  || ''}
                  />
                } />

我该如何解决这个错误？

实际上，我尝试验证表单并卡住以验证密码并确认密码。是否有任何属性useForm可以验证密码并在最新版本中以反应挂钩形式显示消息。请帮忙。实际上，我尝试验证表单并卡住以验证密码并确认密码。是否有任何属性useForm可以验证密码并在最新版本中以反应挂钩形式显示消息。请帮忙。

import React, { useState } from 'react'
import Image from '../../../Components/UI/Images/Image'
import SubmitButton from '../../../Components/UI/Button/Button'
import {useForm} from 'react-hook-form'
import illustrate from '../../../Assets/Imagesused/resetpass.png'
import '../Login/Login.css'
import "./CreatePass.css"
import "../ChangePassword/ChangePass.css"

const CreatePass = () => {

//show password
const [toggle1, setToggle1] = useState(false);
const [toggle2, setToggle2] = useState(false);
let password;

const { register, handleSubmit, formState: { errors }, reset,watch,getValues } = useForm({
    mode: "onTouched"
});
password = watch("password", "");

const onSubmit = (data) => {
    
    console.log(data); …

我有以下界面：

export interface DataResponse {
  user_id: string;
  name: string;
  phone_number: string;
  country: string;
}

它用作通过反应查询获取数据的类型。如果有数据，我正在使用 useEffect 填充字段：

useEffect(() => {
    if (userData) {
      Object.entries(userData).forEach(
        ([name, value]) => setValue(name, value));
    }
}, [setValue, userData]);

userData 的类型是 DataResponse...当我用它设置值时，setState(name, value)它会在名称下划线并引发以下错误：

Argument of type 'string' is not assignable to parameter of type | "name" | "phone_number" | "country"

我有一个TextField连接到的元素react-hook-form。当我专注于该输入时，我会打开一个国家/地区列表，以便我可以选择一个国家/地区，通过 中的setValue函数将其电话代码填充到该字段中react-hook-form。

一切正常，国家/地区代码确实出现在字段中，但手动输入文本时通常向上移动的标签不会向上移动。

这是它的样子

我有一个多步骤表单，我正在使用 react 来制作我正在使用的验证react-hook-form。

我已经完成了 90% 的事情，只是我面临的问题是获取动态的第二个表单数据。

我正在做的是

• 在我的第一个表单中，我有两个字段，当它们被填写（验证）时，我将转到下一个表单
• 在我的下一个表单中，我有两个输入字段，在添加按钮上，用户也可以添加多行字段，这些工作正常

问题

• 现在，当我在第二种形式中创建新字段时，我想验证它们，但不知道该怎么做。

我做了什么

在我的主要组件中，我这样做是为了验证

const forms = [
  {
    fields: ['desig', 'dept'],
    component: () => (
      <Pro register={register} errors={errors} defaultValues={defaultValues} />
    ),
  },
  {
    fields: [
      `userInfo[0].fname`, // here I am facing issue if I am statically putting 0,1 then it is validating that perticular form
      `userInfo[0].sirname`,
    ],
    component: () => (
      <Basic
        register={register}
        errors={errors}
        defaultValues={defaultValues}
        inputHolder={inputHolder}
        deleteRow={deleteRow}
        addRow={addRow}
      />
    ),
  },
];

单击提交时，我正在执行此操作

const handleSubmit = (e) => …

我使用react-hook-form进行表单验证和提交，使用单个提交类型按钮一切正常，现在我需要三个按钮，“保存草稿”，“预览页面中的数据值”和“提交审批”，我可以选择退出模式选择单选按钮，但想要具有三个按钮提交功能，这需要表单数据。为输入字段添加 onchnage 可以，但表单验证需要重新编写。

  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => alert(JSON.stringify(data));
  function NeedTohaveFormDataHere1(Data) {

   } function NeedTohaveFormDataHere2(Data) {

   }
    return (  <form onSubmit={handleSubmit(onSubmit)}>
     <Headers />

  <input name="firstName" ref={register} placeholder="First name" />

  <input name="lastName" ref={register} placeholder="Last name" />

  <select name="category" ref={register}>
    <option value="">Select...</option>
    <option value="A">Category A</option>
    <option value="B">Category B</option>
  </select>
  <button onClick={NeedTohaveFormDataHere1}>
   Save Draft
  </button > 
  <button onClick={NeedTohaveFormDataHere2}>
    Preview
  </button>  
  <input type="submit" />
</form>
 );
 }
 

onSubmit函数会获取表单数据，其他两个按钮函数如何获取表单数据？

爱..与

  <button onClick={handleSubmit(NeedTohaveFormDataHere1)}>
   Save Draft
  </button > 
  <button onClick={handleSubmit(NeedTohaveFormDataHere2)}> …

我正在为我的输入组件使用react-hook-form，但是有一个问题。在某些文本字段中，例如，仅接受数字的用于验证的文本字段，我不知道如何做到这一点，对于正常textInput，我们可以使用正则表达式，例如

 const [numberInput, setNumberInput] = useState("")
  function onTextChanged(value) {
    setNumberInput(value.replace(/[^0-9]/, "")) 
  }

并将该函数和钩子值分别放在onTextChange和value上，我在react-hook-form上尝试了上面相同的方法，但它不起作用！我仍然可以输入其他字符，例如“+”或“-”，当然使用数字键盘

这是 TextField 组件

export interface HTextFieldProps extends TextFieldProps {
  control: Control<any>
  name: string
  defaultValue?: string
}

/**
 * Describe your component here
 */
export const HTextField = function HookformTextField(props: HTextFieldProps) {
  const { name, control, defaultValue = "", ...restProps } = props

  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, value }, fieldState: { error } }) => (
        <TextField …

我正在使用react-hook-form渲染自定义组件Controller。

如果使用时出现错误register，焦点正常，但Controller不正常。

当自定义组件仅处理单个输入时，我能够找到一种处理错误的方法，但当它有多个输入时，我找不到处理错误的方法。

表单.js

import { Controller, useForm } from "react-hook-form";\nimport CustomInput from "./CustomInput";\nimport * as yup from "yup";\n\nconst schema = yup.object({\n  name: yup.object().shape({\n    first: yup.string().required(),\n    last: yup.string().required(),\n  }),\n});\nfunction Form() {\n  const {\n    handleSubmit,\n    control,\n    formState: { errors },\n  } = useForm({\n    defaultValues: { name: { first: "", last: "" } },\n    resolver: yupResolver(schema),\n  });\n\n  const onSubmit = (data) => console.log(data);\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)}>\n      <Controller\n        name="name"\n        control={control}\n        rules={{ required: true }}\n …

Person组件以两种不同的形式重用：

人.tsx

import { UseFormReturn } from "react-hook-form";
import { FieldPaths } from "./types";

type Props<TFormValues> = {
  methods: UseFormReturn<TFormValues>;
  fieldPaths: FieldPaths<TFormValues>;
};

const Person = <TFormValues,>({
  methods,
  fieldPaths
}: Props<TFormValues>) => {
  const { register } = methods;

  return (
    <div className="person">
      <div className="name-field">
        <input {...register(fieldPaths.firstName)} placeholder="First name" />
        <input {...register(fieldPaths.lastName)} placeholder="Last name" />
      </div>
      <div className="radio-group">
        <label>
          <input type="radio" value="free" {...register(fieldPaths.status)} />{" "}
          Free
        </label>
        <label>
          <input type="radio" value="busy" {...register(fieldPaths.status)} />{" "}
          Busy
        </label>
      </div>
    </div>
  ); …

我正在尝试使用自定义Material-UI Autocomplete组件并将其连接到react-hook-form.

TLDR：需要使用带有 react-hook-form 控制器的 MUI 自动完成而不需要 defaultValue

我的自定义Autocomplete组件采用具有结构的对象，{_id:'', name: ''}它显示名称并_id在选择选项时返回。该Autocomplete工作得很好。

<Autocomplete
  options={options}
  getOptionLabel={option => option.name}
  getOptionSelected={(option, value) => option._id === value._id}
  onChange={(event, newValue, reason) => {
    handler(name, reason === 'clear' ? null : newValue._id);
  }}
  renderInput={params => <TextField {...params} {...inputProps} />}
/>

为了使工作与react-hook-form我设置的setValues是处理程序onChange中Autocomplete，然后手动注册该组件在useEffect如下

useEffect(() => {
  register({ name: "country1" });
},[]);

这工作正常，但我想没有useEffect钩子，只是直接以某种方式使用寄存器。

接下来我尝试使用Controller组件 …