React Hook clean/show 键入时出现错误消息

Question

我刚开始使用 React，我正在使用 react-hook-form 来管理 warning/error 消息。

我构建了以下表格：

const { register, handleSubmit, errors } = useForm();

<form
    id="contactForm"
    onSubmit={handleSubmit(onSubmit)}
>
    <div className="messages"></div>
    <div className="row">
        <div className="col-md-6">
            <div className="form-group">
                <label htmlFor="firstName">
                    First Name
                </label>
                {errors.firstName && (
                    <span className="help-block with-errors">
                        Firstname is required. Minimum of 2 letters.
                    </span>
                <input
                    id="form_name"
                    type="text"
                    name="firstName"
                    className="form-control"
                    placeholder="Type First name"
                    ref={register({
                        required: "Required",
                        minLength: 2
                    })}
                />
            </div>
        </div>
        <div className="col-md-6">
            <div className="form-group">
                <label htmlFor="lastName">
                    Last Name
                </label>
                {errors.lastName && (
                    <span className="help-block with-errors">
                        Lastname is required.
                    </span>
                )}
                <input
                    id="form_lastname"
                    type="text"
                    name="lastName"
                    className="form-control"
                    placeholder="Type Last name"
                    ref={register({
                        required: "Required",
                    })}
                />
            </div>
        </div>
    </div>
</form>

当我提交表格时，它工作得很好。但是，如何在键入时显示错误消息？例如，在名字中，如果我只输入一个字符，它应该显示，如果我有 2 个或更多，它应该消失。

另外，提交表单后需要清理errors变量吗？如果有，应该怎么清洗？

谢谢

Answer 1

如 api 所示，useForm() 可以接受带有一些参数的对象。如果您通过 mode，则可以在验证发生时 select。验证每个更改传递 onChange 字符串选项：

const { register, handleSubmit, errors } = useForm({ mode: 'onChange' });

React Hook clean/show 键入时出现错误消息

React Hook clean/show Errors message while typing

reactjs

react-hooks

react-hook-form