React 钩子形式：select 标签在提交后不会给出错误，即使该选项被禁用并且其值未定义

Question

          <form
            className="d-flex flex-column justify-content-center align-items-center mt-3"
            onSubmit={handleSubmit(onSubmit)}
          >
                  <select
                    name="Test"
                    defaultValue={item && item.RightToAct}
                    ref={register({ required: true })}
                    className="form-inputs"
                  >
                    <option disabled selected value={undefined}>
                      Choose an option
                    </option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                  </select>
                  {errors.Test &&
                    errors.Test.type === "required" && (
                      <p style={{ color: "red " }}>
                        Choosing an option is required.
                      </p>
                    )}
           </form>

如您所见，我只想在所选选项被禁用时显示一个简单的文本。即使它被禁用它仍然接受该选项，我什至给它一个未定义的值以查看是否会触发错误但它仍然接受正确的选项。

我正在为此使用 React-hook-forms，页面底部的现场演示有一个很好的演示，其默认值不会通过错误：https://react-hook-form.com/

复制我的问题：https://codesandbox.io/s/affectionate-shirley-yg3s4?file=/src/App.js

Answer 1

您似乎在使用一些旧版本的 react-hook-form (v6)。你被它束缚了吗？如果没有，最好使用最新版本，它有更好的 api 和更少的错误！

我已经用最新版本更新了您的示例，现在可以正常工作了，check it out

请注意：select 组件应通过 value 属性控制（在我们的示例中由 react-hook-form 自动处理），而不是通过 selected 属性控制15=]（这是 React 限制，不是 react-hook-form）。空选项最好使用空字符串值，而不是 undefined.

React 钩子形式：select 标签在提交后不会给出错误，即使该选项被禁用并且其值未定义

React hook forms: select tag doesn't give an error after submit even though the option is disabled and has undefined as its value

reactjs

react-hook-form