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

Question

我正在尝试验证表单。当我将 React-select 组件插入到控制器中时，问题就出现了：即使规则设置为“required: true”，如果 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)   

在控制器内部，对于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>
  );
}

你能尝试一次吗？如果有帮助请告诉我！