React+Bootstrap+react-hook-form：为何用Controller？Form.Control是受控组件吗？

两种实现方式 #

方法1：使用Controller #

const schema = yup.object().shape({
    login: yup.string().required('Email address is required')
});

<Controller
control={control}
name="login"
defaultValue=""
render={
({ field: { onChange, value, ref } }) => (
      <Form.Control onChange={onChange} value={value} ref={ref} 
isInvalid={errors?.login} placeholder="Enter user name" />
  )
}/>

方法2：使用register #

const schema = yup.object().shape({
    login: yup.string().required('Email address is required')
});

<Form.Control {...register('login')} name="login" type="text" placeholder="Enter email" />

疑问 #

• 为何要使用Controller？
• Bootstrap的Form.Control是受控组件还是非受控组件？

Bootstrap官网说明 #

return (<Form.Control>组件直接渲染<input>或指定的其他组件。若要获取非受控<Form.Control>的值，需像处理非受控输入框一样为其添加ref，再调用ReactDOM.findDOMNode(ref)获取DOM节点。
)

更新解答（11/10） #

• 若组件不支持ref，就需要使用Controller组件。
• React Hook Form便于和外部UI组件库集成，当组件未暴露输入框的ref时，Controller组件可完成注册流程。

内容的提问来源于stack exchange，提问作者adviner