如何验证反应选择

Posted 2023-02-22

【中文标题】如何验证反应选择

【英文标题】：How to validate react select

【发布时间】：2021-03-20 11:54:48

【问题描述】：

我正在使用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，因为我想显示一个选定的值，并且在某些情况下，我从服务器获取值，我想显示为选定的。

【问题讨论】：

以反应钩子形式检查控制器react-hook-form.com/get-started#IntegratingwithUIlibraries

您可以将代码块用于代码部分，以使您的问题变得更好

@SreevardhanReddy 我已经检查并实现了这一点，但问题是它没有采用默认值。

【参考方案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

【讨论】：

嘿，这里没有采用默认值或值，因为我想将第一个显示为选中

我尝试了设置值，它没有显示提交时的值

@manishthakur 设置值不起作用，因为它是在您的字段注册之前触发的。尝试使用setTimeout