将Bootstrap组件与react-hook验证表单一起使用

我已经与React一起工作了一段时间,并决定尝试使用react-hook。我正在尝试通过一些简单的验证来制作一个简单的表单,但似乎该验证不适用于引导程序组件。对于“常规”输入,它可以正常工作,但对于form.control,则它不起作用(跳过了验证)。看到了一个解决方案,其中将componenet包装在控制器中,如下所示,但是我得到了相同的结果。有任何想法吗? 谢谢。

function Example(){
const { register, handleSubmit, control, errors } = useForm();
const onSubmit = (data:any) => {
    console.log(data)
}
return(
    <Form onSubmit={handleSubmit(onSubmit)}>

            <Form.Label column>Name</Form.Label>

                <Controller as={<Form.Control/>} name="firstName" control={control} ref={register({required: true})} defaultValue="" />
                {errors.firstName && <p>This is required</p>}

                <input name="lastName" className="form-control" ref={register({required: true})} /> 
                {errors.lastName && <p>This is required</p>}

        <input type="submit" ref={register({required: true})}/>
    </Form>
)

}

评论