为了账号安全,请及时绑定邮箱和手机立即绑定

react-hooks-form 中的受控组件和非受控组件之间的主要区别是什么?

react-hooks-form 中的受控组件和非受控组件之间的主要区别是什么?

米琪卡哇伊 2022-12-22 12:55:47
我正在使用反应挂钩形式。我从有关受控和不受控的文档中阅读。受控<form onSubmit={handleSubmit(onSubmit)}>  <input name="firstName" ref={register({ required: true })} />  <input name="lastName" ref={register} />  <input type="reset" /> // standard reset button  <input type="button" onClick={reset} />  <input type="button" onClick={() => reset({ firstName: "bill" }); }} /> // reset form with values  <input type="button" onClick={() => {    reset({      firstName: "bill"    }, {      errors: true, // errors will not be reset       dirtyFields: true, // dirtyFields will not be reset      isDirty: true, // dirty will not be reset      isSubmitted: false,      touched: false,      isValid: false,      submitCount: false,    });  }} /></form>这是不受控制的形式<form onSubmit={handleSubmit(onSubmit)}>  <Controller     as={TextField}     name="firstName"    control={control}     rules={ required: true }     defaultValue=""  />  <Controller     as={TextField}     name="lastName"    control={control}    defaultValue=""   />    <input type="submit" />  <input type="button" onClick={reset} />  <input    type="button"    onClick={() => {      reset({        firstName: "bill",        lastName: "luo"      });    }}  /></form>有人可以告诉它有什么区别吗?通过制造受控组件而不是不受控制的组件,我可以获得什么?
查看完整描述

1 回答

?
素胚勾勒不出你

TA贡献1827条经验 获得超9个赞

React Hook Form 包含不受控的表单和输入,这意味着您仍然可以构建受控的表单和输入:https ://twitter.com/bluebill1049/status/1286438673546768386

ref={register}那么和之间有什么区别Controller

  • ref={register}https ://react-hook-form.com/api#register表示不受控制的输入将订阅输入更改并通过 react-hook-form 检索其值。

  • Controllerhttps ://react-hook-form.com/api#Controller是一个包装器组件,它隔离受控组件以在其范围内重新呈现,从而减少对应用程序/表单级别的性能影响。


查看完整回答
反对 回复 2022-12-22
  • 1 回答
  • 0 关注
  • 67 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信