Блог

Я использую react-select для лучшего просмотра пользовательского интерфейса, и я его реализовал, теперь я пытаюсь сделать

• Я хочу проверить это поле ввода, когда пользователь нажимает на кнопку Готово (форма отправки)
• Я использую 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 amp;amp; (
    <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 , поскольку я хочу показать одно выбранное значение, и в некоторых случаях я получаю значения с сервера, которые я хочу показать как выбранные.

Вот ссылка для codesandbox, вы можете либо обернуть компонент в контроллер, либо использовать 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