如何在模糊时触发 React-hook-form Controller 验证？

Question

我正在使用 React-Hook-Form 创建一个表单。我已将 useForm({mode: 'onBlur'}) 设置为立即触发验证并在用户 onBlur 元素后立即显示错误消息。对于输入文本字段，它工作正常。但是，它不适用于我的 <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;

点击select后，选择空值，然后blur，没有显示onBlur的错误信息。

有什么方法可以让触发器验证并在Blur上显示错误信息吗？我错过了什么吗？

Answer 1

react-hook-form不能直接指向select组件的blur状态。相反，它所做的是将 onBlur 函数发送到传递给控制器的组件。您必须收到道具并将其添加到您的自定义 select.

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 不会对 [=27 执行任何操作=].它是 props.selected 因为你在控制器上将 valueName 设置为 selected。

Stackblitz

如何在模糊时触发 React-hook-form Controller 验证？

How to make React-hook-form Controller validation triggered on blur?

javascript

reactjs

react-hooks

react-hook-form