validation - React-select 和 React-hook-form ，关注错误问题

Question

我正在尝试验证表单。
当我在 Controller 中插入一个React-select组件时出现问题:即使规则设置为“required:true”，如果在Controller之后出现另一个正常的输入框错误，它会跳转到下一个并失去焦点 Controller 错误(在本例中为“品牌评论部分”)。
这里的代码:

export default function Proof() {
    const { register, handleSubmit, errors, control } = useForm();
    const refReactSelect = useRef();

    const createHandler = (data) => {
        console.log(data);
    }
    return (
        <div>
            <form onSubmit={handleSubmit(createHandler)}>
                <label className="font-weight-medium" htmlFor="productCategory">Category</label>
                {/* Name */}
                <div className="form-group pb-2">
                    <label className="font-weight-medium" htmlFor="productName">Name</label>
                    <input
                        className="form-control"
                        type="name"
                        id="productName"
                        name="productName"
                        ref={register({ required: true })}
                    />
                    {errors.productName && errors.productName.type === "required" && (
                        <p className="text-danger">{"Empty name"}</p>
                    )}
                </div>

                <Controller
                    name="productCategory"
                    as={
                        <Select
                            ref={refReactSelect}
                            options={categories}
                            isSearchable={true}
                            placeholder="Select"
                            id="productCategory" />
                    }
                    control={control}
                    rules={{ required: true }}
                />
                {errors.productCategory && errors.productCategory.type === "required" && (
                    <p className="text-danger">{"Empty category"}</p>
                )}

                {/* Brand */}
                <div className="form-group pb-2">
                    <label className="font-weight-medium" htmlFor="productBrand">Brand</label>
                    <input
                        className="form-control"
                        type="text"
                        id="productBrand"
                        name="productBrand"
                        // onChange={(e) => setBrand(e.target.value)}
                        ref={register({ required: true })}
                    />
                    {errors.productBrand && errors.productBrand.type === "required" && (
                        <p className="text-danger">{"Empty Brand"}</p>
                    )}
                </div>

                <div>
                    <button type="submit">Click here </button>
                </div>
            </form>

        </div>
    )
}

Answer 1

我也遇到过这种场景。因此，您可以创建一个函数为 onError ，如果出现任何错误，它将滚动到该字段。

const onError= () => window.scrollTo(0, inputErrorRef.current?.offsetTop || 0)   

在 Controller 内部，对于 onFocus事件，可以叫这个onError功能。
此外，将引用传递给错误消息 <p>标签。所以每当我们遇到错误时，元素就会出现在 dom 中，我们可以通过 ref 来引用它。

 <Controller
  name="productCategory"
   onFocus={onError}
  as={
    <Select
      ref={refReactSelect}
      options={categories}
      isSearchable={true}
      placeholder="Select"
      id="productCategory"
    />
  }
  control={control}
  rules={{ required: true }}
/>;
{
  errors.productCategory && errors.productCategory.type === "required" && (
    <p ref={errorRef} className="text-danger">{"Empty category"}</p>
  );
}

你能试试这个吗？如果有帮助，请告诉我!