如何使用 React Hook Form Controller 实现 ReactFlagsSelect

Question

我尝试使用 <Controller /> 通过 React Hook 实现。当我提交表单国家字段 return undefined.

<Controller 
  name="country"
  control={control}
  render={({ field: { onChange, value } }) => (
    <ReactFlagsSelect
      selected={selected}
      onSelect={code => handleChange(code)}
      value={value}
      onChange={onChange}
    />
  )}
/>

Answer 1

问题是您将 RHF 的 onChange 处理程序传递给了错误的道具。 <ReactFlagsSelect /> 没有 onChange 属性，您应该将其传递给 onSelect 属性。

<Controller 
  name="country"
  control={control}
  render={({ field: { onChange, value } }) => (
    <ReactFlagsSelect
      selected={selected}
      onSelect={onChange}
      value={value}
    />
  )}
/>

Side-note：RHF 将在其内部表单状态中更新您注册字段的值更改，因此无需通过 useState 或类似方式对这些值使用额外的状态管理。如果您确实需要调用您的 handleChange 回调，您可以在 onSelect 回调中执行这两项操作。

<Controller 
  name="country"
  control={control}
  render={({ field: { onChange, value } }) => (
    <ReactFlagsSelect
      selected={selected}
      onSelect={code => {
        onChange(code);
        handleChange(code);
      }}
      value={value}
    />
  )}
/>

如何使用 React Hook Form Controller 实现 ReactFlagsSelect

How To implement ReactFlagsSelect with React Hook Form Controller

reactjs

react-hook-form