Как сделать, чтобы проверка контроллера React-hook-form запускалась при размытии? - PullRequest
Новая
       93

Как сделать, чтобы проверка контроллера React-hook-form запускалась при размытии?

0 голосов
/ 07 мая 2020

Я создаю форму с помощью React-Hook-Form. Я установил useForm({mode: 'onBlur'}) для мгновенного запуска проверки и отображения сообщения об ошибке сразу после того, как пользователь включил элемент Blur. Для текстовых полей ввода работает нормально. Однако он не работает с моим элементом <Controller />, который обертывает настроенный <Select />.

Вот мой код: 

import React from 'react';
import { useForm, Controller, ErrorMessage } from 'react-hook-form';
import Select from '../../components/UI/Select';

const departmentList = [
    { name: 'PLEASE SELECT', value: '' },
    { name: 'Finance', value: 'FIN' },
    { name: 'IT', value: 'IT' },
    { name: 'Business', value: 'BIZ' }
];

const Form = props => {
    const { register, handleSubmit, control, errors } = useForm({ mode: "onBlur" });

    const onSubmit = (data) => {
        console.log(data);
    }
    return (
        <form onSubmit={handleSubmit(onSubmit)} style={{backgroundColor: 'white'}}>
            <div>
                <label>First Name:</label>
                <input type="text" name='firstName' ref={register({ required: 'First name cannot be null.' })} />
                <ErrorMessage errors={errors} name='firstName' />
            </div>

            <div>
                <label>Last Name:</label>
                <input type='text' name='lastName' ref={register({ required: 'Last name cannot be null.' })} />
                <ErrorMessage errors={errors} name='lastName' />
            </div>

            <div>
                <label>Department:</label>
                <Controller
                    as={<Select options={departmentList} />}
                    control={control}
                    valueName="selected"
                    rules={{ required: 'Department cannot be null.' }}
                    name="department"
                />
                <ErrorMessage errors={errors} name='department' />
            </div>

            <input type="submit" value="Submit" />
        </form>
    );
}

export default Form;

Ниже приведен элемент <Select />: 

import React from 'react';

const Select = props => {
    let optionList = null;

    if(props.options) {
        optionList = props.options.map((o, i) => <option key={i} value={o.value}>{o.name}</option>)
    }

    return (
        <select 
            className="form-control" 
            value={props.value}
            style={props.style} 
            selected={props.selected}
            onChange={props.onChange}
        >
            { optionList }
        </select>
    );
};

export default Select;

После нажатия на выбор, выбора пустого значения, а затем размытия, не отображается сообщение об ошибке на Blur.

Есть ли способ сделать проверку триггера и показать сообщение об ошибке onBlur? Я что-нибудь пропустил?

1 Ответ

1 голос
/ 08 мая 2020

react-hook-form не может напрямую управлять состоянием blur компонента выбора. Вместо этого он отправляет функцию onBlur компоненту, переданному контроллеру. Вы должны получить опору и добавить ее в свой собственный выбор. 

const Select = props => {
    let optionList = null;

    if(props.options) {
        optionList = props.options.map((o, i) => <option key={i} value={o.value}>{o.name}</option>)
    }

    return (
        <select 
            className="form-control" 
            value={props.selected}
            style={props.style} 
            onChange={props.onChange}
            onBlur={props.onBlur}
        >
            { optionList }
        </select>
    );
};

HTML select по умолчанию получает значение через свойство value, поэтому selected ничего не делает на выбор. Это props.selected, потому что вы установили valueName как selected на контроллере.

Stackblitz

...