如何验证React Hook形式选择字段

Question

选择任何选项后，我可以在onChange < /code>函数上获取值，但是 /我尝试提交表单时出现错误消息。

我的代码：

<div className="form-group mb-3">
    <label>Country</label>
    <Controller
        control={control}
        name="country"
        render={({ 
            field: { onChange, onBlur, value, ref }
        }) => (
            <select
                className='form-control form-select'
                onChange={(e) => setCountry(e.target.value)}
                inputRef={register("country", { required: true })}
            >
                <option>Select Country</option>
                {
                    Country.getAllCountries().map((item) => <option value={item.isoCode} key={item.isoCode}>{item.name}</option>)
                }
            </select>
        )}
    />
    {errors.country && <span className="error-text">Country is required</span>}
</div>

错误消息：

Answer 1

当您使用React-Hook-Form的控制器使用控制器时，这是正确的方法：

<Controller
    control={control}
    name="country"
    render={({field, fieldState: {invalid}}) => (
        <>
            <label>Country</label>
            <select
               {...field} 
               className='formcontrol form select'
               onChange={({target:{value}) => {
                  changeCountry(value)
                  field.onChange(value)
               }}>
                <option>Select Country</option>
                {Country.getAllCountries().map((item) => <option
                    value={item.isoCode}
                    key={item.isoCode}>{item.name}</option>)}
            </select>
            {invalid && <span className="error-text">Country is required</span>}
        </>
    }/>

如果您没有任何特殊原因，请勿将field删除，并使用fieldState在Controller提供的中的值与呈现的字段相关。