react-hook-form：在选择元素中使用 readyOnly答案

【问题标题】：react-hook-form: using readyOnly in a select elementreact-hook-form：在选择元素中使用 readyOnly
【发布时间】：2021-12-01 20:16:58
【问题描述】：

我正在尝试在选择元素中使用 readOnly，因此用户无法更改输入字段的值，但是在提交表单时，我仍然需要 Api 的值，我听说这样做的唯一方法是react-hook-form 是使用 readOnly 而不是 disabled，它在正常输入字段中工作，但 typescript 在选择元素中给出错误。这是代码：

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 的任何内容，我登陆了 this 链接，当我尝试更改具有 readOnly 的输入以选择它时给出同样的错误，有没有办法让readOnly工作或者有一种解决方法可以使禁用保存handleSubmit中的数据？

【问题讨论】：

选择不支持只读，请参见此处：developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly。这不是反应钩子表单问题，它是强制执行 HTML 规范的打字稿
那么你能建议我如何处理这个问题吗，有没有办法使用 disabled 并且仍然以反应钩子形式保存值
在props.disabled===true 的情况下，如何将数据显示为简单的文本节点（或禁用的文本输入）而不是选择元素？为了将值传递给 API，使用 <input type="hidden" id="{props.field_id}" value={value}>?

标签： javascript html reactjs forms react-hook-form

【解决方案1】：

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

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

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

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

【讨论】：

与我的团队一起，我们决定只配置 api，因此它只需要未禁用的字段，这是有道理的，但您的答案似乎按我想要的方式工作，所以我将标记为解决方法，谢谢！