如何处理子组件中的输入错误验证反应钩子形式答案

【问题标题】：how handle input errors validation in sub component react hook form如何处理子组件中的输入错误验证反应钩子形式
【发布时间】：2021-08-19 07:59:43
【问题描述】：

我制作了一个名为Input 的组件。现在我想知道错误是否在那个组件中（Input 组件）给我看。我在Login 组件中使用Input 组件，并使用react-hook-form 来验证表单。

输入组件

const Input = ({data, extraData, register, errors})=>{
    const inp = extraData.name
    return <Fragment>
        {
            extraData.id &&
            extraData.label &&
            <label htmlFor={extraData.id}>{extraData.label}</label>
        }
        <input {...register(extraData.name, {...data})} {...extraData} />
        {data.required && <Fragment>
            {errors.inp?.type === 'required' && <p>required</p>}
        </Fragment>}
    </Fragment>
}
export default Input;

登录组件

const Login = ()=>{
    const {handleSubmit, register, formState: {errors}} = useForm()
    const onS = (data) =>{
        console.log(data)
    }
    return <Fragment>
        <form onSubmit={handleSubmit(onS)}>
            <Input data={
                {
                    minLength : 5,
                    maxLength : 30,
                    required : true,
                }
            } extraData ={
                {
                    type : 'text',
                    placeholder : 'Enter Your Name',
                    name : 'name',
                    label : 'name', id : 'name1'
                }
            } register={register} errors={errors}/>

            <Input data={
                {
                    minLength : 5,
                    maxLength : 30,
                    required : true,
                }
            } extraData ={
                {
                    type : 'text',
                    placeholder : 'Enter Your Family',
                    name : 'Family',
                    label : 'Family', id : 'Family1'
                }
            } register={register} errors={errors}/>

            <button>Submit</button>
        </form>

    </Fragment>
}
export default Login;

【问题讨论】：

标签： javascript reactjs validation

【解决方案1】：

在Input 组件中试试这个：

const Input = ({data, extraData, register, errors})=>{
    const inp = extraData.name
    return <Fragment>
        {
            extraData.id &&
            extraData.label &&
            <label htmlFor={extraData.id}>{extraData.label}</label>
        }
        <input {...register(extraData.name, {...data})} {...extraData} />
        {errors[extraData.name] && <span>{errors[extraData.name].message}</span>}
    </Fragment> }

export default Input;

然后在Login 组件中将required : true 替换为required : "your message"

【讨论】：