reactjs - 使用带有 react-hook 验证表单的引导组件

Question

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

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

}

标签： reactjsformsreact-hooksreact-bootstrap