React Hook Form中Select下拉框的Yup校验失效问题求助

嘿，我来帮你搞定这个问题～ 你遇到的错误提示不消失的核心原因是：你手动给select标签添加的onChange事件覆盖了react-hook-form通过register绑定的内置onChange处理函数。这就导致当你选择非空值后，表单没有触发校验状态的更新，错误提示自然就一直留在那里了。

解决方案：保留react-hook-form的内置onChange，同时添加自定义逻辑 #

有两种简洁的解决方式，推荐第一种更优雅的实现：

方式一：将自定义逻辑传入register的配置项里 #

直接在register中配置onChange，这样react-hook-form会同时执行内置的状态更新和你的自定义逻辑：

<select 
  {...register("select", {
    onChange: (e) => {
      doSomething(e.target.value); // 执行你的自定义逻辑
    }
  })}
>

方式二：手动触发字段校验 #

如果你更倾向于保留独立的onChange写法，可以从useForm中解构出trigger方法，在自定义函数里手动触发select字段的校验：

const { register, handleSubmit, formState: { errors }, trigger } = useForm({
  mode: "onChange",
  resolver: yupResolver(SignupSchema)
});

const doSomething = (value) => {
  // 你的自定义逻辑
  trigger("select"); // 手动触发select字段的校验
};

// 然后select标签依然保留你的原始写法
<select {...register("select")} onChange={(e) => doSomething(e.target.value)} >

完整修正后的代码示例（推荐方式一） #

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import "./styles.css";

const SignupSchema = yup.object().shape({
  select: yup.string().required("此字段为必填项") // 可以给Yup添加自定义错误提示
});

function App() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    mode: "onChange",
    resolver: yupResolver(SignupSchema)
  });

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  const doSomething = (value) => {
    // 这里写你的自定义业务逻辑，比如打印值或者调用接口
    console.log("当前选择的下拉框值：", value);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Select</label>
        <select 
          {...register("select", {
            onChange: (e) => {
              doSomething(e.target.value);
            }
          })}
        >
          <option value="">Null</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
        {errors.select && <p style={{ color: "red" }}>{errors.select.message}</p>}
      </div>
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

为什么这样能解决问题？ #

react-hook-form的register方法会返回包含onChange、onBlur等事件处理的props，这些内置函数负责更新表单的状态并触发校验。当你直接在DOM元素上写onChange时，会覆盖掉这些内置函数，导致表单无法感知到值的变化，也就不会重新校验字段状态。通过将自定义逻辑融入register的配置，就能保证内置逻辑和自定义逻辑都能正常执行啦～

内容的提问来源于stack exchange，提问作者snouck