如何验证反应选择

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',
    })}
/>

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

编辑

我尝试了这种方法，但它不占用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