作为 prop 传递时，Register 不是一个函数？

Question

我第一次使用react-hook-form。我正在阅读文档并遵循。同样，我已经布置了组件并设计了它们的样式。现在我试图在表单提交后提醒数据。

这是ContactForm

import React, { useState } from 'react';
import * as S from './style';
import { PrimaryButton } from '@element/Button';
import TextInput from '@element/TextInput';
import { useForm } from 'react-hook-form';

export const ContactForm = () => {
  const { register, handleSubmit } = useForm();
  const [firstName, setFirstName] = useState('');
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
return (
    <S.ContactFormWrapper onSubmit={handleSubmit(onSubmit)}>
      <TextInput
        name={'firstName'}
        label={'First Name'}
        state={firstName}
        setState={setFirstName}
        placeholder={'John'}
        type={'text'}
        width={'48%'}
        options={{
          maxLength: '20',
          minLength: '2',
          required: true,
        }}
        register={register}
      />
      <PrimaryButton type={'submit'} text={'Send Message'} />
    </S.ContactFormWrapper onSubmit={handleSubmit(onSubmit)}>
)
}

这是我自定义创建的TextInput

import React, { useEffect, useState } from 'react';
import * as S from './style';

const TextInput = ({
  name,
  label,
  placeholder,
  state,
  setState,
  type,
  width,
  register,
  options,
}) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <S.TextInputWrapper inputWidth={width}>
      <S.Label htmlFor={name} isActive={isActive}>
        {label}
      </S.Label>
      <S.Input
        placeholder={placeholder}
        type={type}
        name={name}
        id={name}
        {...register(name, options)}
        onChange={(event) => setState(event.target.value)}
        onFocus={() => setIsActive(true)}
        onBlur={() => setIsActive(false)}
      />
    </S.TextInputWrapper>
  );
};

export default TextInput;

错误信息

TypeError: register is not a function {...register(name, options)}

我在 StackOverflow 上搜索了一篇文章，但答案让我感到困惑，而且发问者代码与我的有很大不同。因为我认为发生错误是因为我使用了样式组件，而且它嵌套得很深。我很困惑，因为我正在阅读文档并遵循。

如果我传播错误说，register is not a function否则如果我不传播它，那么错误是... spread is required.

希望你能为我的困惑带来光明。

亲切的问候库库

Answer 1

最简单的解决方案是利用 React hook 表单的上下文并使用useFormContext hook。

输入组件

import { useFormContext } from "react-hook-form";

const TextInput = ({ name, options }) => {  
  const { register } = useFormContext();
  return (
      <S.Input
        name={name}
        {...register(name, options)}
      />
    </S.TextInputWrapper>
  );
};

register从父窗体中删除输入功能

export const ContactForm = () => {
 ...other functions
 return <TextInput name={'firstName'} options={{maxLength: '20' }} />;
}

一个更简单的解决方案是让react-hook-form控制表单值并使用useController钩子或Controller组件。

import { useController } from "react-hook-form";
const TextInput = ({ name, options }) => {  
  const { field } = useController({ name, rules: options });
  return <S.Input name={name} {...field} />
};

您还可以使用挂钩获取输入状态，useContoller以减少使用的事件数量。

import { useController } from "react-hook-form";
const TextInput = ({ name, options }) => {  
  const { 
   field,
   fieldState: { error, invalid, isDirty, isTouched }
 } = useController({ name, rules: options });
};