React-hook-form：在选择元素中使用readyOnly

Question

我尝试在选择元素中使用 readOnly，以便用户无法更改输入字段的值，但在提交表单时，我仍然需要 Api 的该值，而且我听说这是在 React-hook 中执行此操作的唯一方法-form 是使用只读而不是禁用，它在正常输入字段中工作，但打字稿在选择元素中给出错误。这是代码：

interface dataProps {
  field_id: any;
  disabled: boolean;
}

<select
  readOnly={props.disabled}
  id={props.field_id}
  {...register(...)}
  defaultValue={...}
  onChange={...}
  >
  <option>
    {...}
  </option>
  renderList(...)
</select>

我尝试尽可能缩短代码，这是我得到的整个错误：

Type '{ children: any[]; defaultValue: any; onChange: (e: ChangeEvent<HTMLSelectElement>) => void; onBlur: ChangeHandler; ref: RefCallBack; name: string; readOnly: true; id: any; }' is not assignable to type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
  Property 'readOnly' does not exist on type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.

我阅读了react-hook-form的文档，但我没有看到任何有关使用的内容readOnly，我登陆了这个链接，当我尝试更改必须选择的输入时，readOnly它给出了相同的错误，有没有办法使那readOnly行得通，还是有一个解决方法可以使禁用的数据保存在handleSubmit？

Answer 1

该disabled属性在提交时不会删除该字段react-hook-form。如果您不允许用户编辑该值，您可以使用它：

// category field is still registered even when set disabled.
<select {...register("category")} disabled>

如果您想真正从提交的值中删除该字段，请在使用 RHF 自己的 APIdisabled调用时设置：register

<input {...register("firstName", { disabled: true })}