不能将NextUI的复选框注册到react-hook-form

Question

我正在编写一个ReactJS项目。我使用react hook form来处理表单提交和NextUI (NU)作为UI库。

当我像这样注册NU的复选框时:

<form onSubmit={handleSubmit(onSubmitLogin)}>
<Checkbox defaultSelected {...register('remember')}>
<Text size={14}>Remember me</Text>
</Checkbox>
</form>

然后我提交一个表单:

const onSubmitLogin = (form) => {
console.log(form);
};

但是我从控制台日志中声明的响应是:

{
email: "[e-mail]"
password: "sadsad"
remember: undefined
}

注意:我使用HTML的原始输入(不使用NextUI的电子邮件和密码输入)和rigister =>成功。但是，当我注册NextUI的复选框时，它记录了未定义的值。我如何注册复选框以及NextUI的输入到react-hook-form

编辑:更详细地说，当我选中一个复选框时，控制台弹出一个错误:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')

Answer 1

我认为来自NextUI的Checkbox组件是一个受控组件，所以当使用react-hook-form时，您可以将Checkbox组件包装在来自react-hook-form的Controller组件中:

<Controller
control={control}
name='remember'
render={({ field: { onChange, value } }) => (
<Checkbox defaultSelected onChange={onChange} isSelected={value}>
<Text size={14}>Remember me</Text>
</Checkbox>
)}
/>