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

Question

我制作了一个名为Input. 现在我想知道错误是否在那个组件（Input组件）中给我看。我Input在组件内部使用Login组件，并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;

标签： javascriptreactjsvalidation

Answer 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"