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

Question

我正在使用反应挂钩形式。我从有关受控和不受控的文档中阅读。

受控

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

有人可以告诉它有什么区别吗？通过制造受控组件而不是不受控制的组件，我可以获得什么？

Answer 1

React Hook Form 包含不受控的表单和输入，这意味着您仍然可以构建受控的表单和输入：https ://twitter.com/bluebill1049/status/1286438673546768386ref={register}那么和之间有什么区别Controller？ref={register}：https&nbsp;://react-hook-form.com/api#register表示不受控制的输入将订阅输入更改并通过 react-hook-form 检索其值。Controller：https&nbsp;://react-hook-form.com/api#Controller是一个包装器组件，它隔离受控组件以在其范围内重新呈现，从而减少对应用程序/表单级别的性能影响。