注册不是一个函数时传递作为道具?

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钩子表单的上下文并使用useFormContext钩子。

输入组件

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 });
};

Answer 2

useFormContext是一个很好的解决方案，@Sean W

这里是没有useFormContext的另一个解决方案，您可以像往常一样使用register而不是将其作为prop传递。你只需要转发你的TextInput的ref .

👉🏻您可以在这里找到一个实例:https://stackoverflow.com/a/68667226/4973076