如何验证反应选择

Question

我正在使用react-select 来更好地查看 UI，并且我已经实现了它，现在我要做的是

• 我想在用户单击完成按钮（表单提交）时验证该输入字段
• 我正在使用react-hook-form 进行验证
• 他们提供ref={register} 保存输入字段值
• 所以对于普通输入字段或选择我可以像下面这样使用它

<label  htmlFor="fname">
    First Name
</label>
<input
    type="text"
    name="fname"
    id="fnameid"
    className="form-control"
    ref={register({
        required: 'First name is required',
    })}
/>

{errors.fname && (
    <div>
        <span className="text-danger">
            {errors.fname.message}
        </span>
    </div>
)}

现在上面的工作正常，但如果是react-select，我不知道该怎么做

<Select
    value={initailSelect}
    onChange={(e) => onChangeAge(e)}
    options={data}
/>

所以在这里，当我点击提交按钮时，它只对 fname 进行验证，并在控制台上只为 fname 提供输出

我尝试过如下操作

<Select
    value={initailSelect}
    onChange={(e) => onChangeAge(e)}
    options={data}
    ref={register({
        required: 'age is required is required',
    })}
/>

Code sandbox这是我的代码沙箱我的工作代码，请检查

编辑

我尝试了This approach，但它没有占用defaultValue 或Value，因为我想显示一个选定的值，并且在某些情况下，我从服务器获取值，我想显示为选定的。

Answer 1

这里是codesandbox的链接，你可以将组件包装在Controller中，也可以使用setValue手动设置值并验证

https://codesandbox.io/s/bitter-wave-w1cpi?file=/src/App.js:2084-2802

https://w1cpi.csb.app/

参考 https://react-hook-form.com/get-started#IntegratingwithUIlibraries