React Hook Form中Select组件onChange失效及取值问题求助

1. 自定义函数filtra_pavimento未触发的原因及修复 #

问题出在属性覆盖：你先绑定了onChange={filtra_pavimento}，随后展开的{...register(...)}会返回React Hook Form内部的onChange逻辑，后者会覆盖你手动绑定的事件，导致自定义函数无法执行。

有两种可靠修复方式：

方式一：将自定义逻辑嵌入register配置 #

在register的选项中定义onChange，先执行React Hook Form的内部更新，再触发你的自定义函数，既保留表单状态管理，又能执行自定义逻辑：

<select
  className={errors?.mysel && "input-error"}
  defaultValue="0"
  {...register("mysel", {
    validate: (value) => value !== "0",
    onChange: (e) => {
      // 先执行React Hook Form的字段更新逻辑
      register("mysel").onChange(e);
      // 再触发自定义函数
      filtra_pavimento();
    }
  })}
>

方式二：使用watch监听字段变化 #

如果你的逻辑是基于字段值实时响应，推荐用watch替代手动onChange，它会自动监听字段变化并返回最新值：

const { watch } = useForm();
const myselValue = watch("mysel");

// 在useEffect中监听值变化，触发自定义逻辑
useEffect(() => {
  if (myselValue !== "0") {
    filtra_pavimento();
  }
}, [myselValue]);

2. getValues的正确用法及事件选择 #

getValues用法 #

getValues用于同步获取表单字段的当前值，支持三种调用方式：

// 获取单个字段值
const singleValue = getValues("mysel");
// 获取多个字段值
const { mysel, otherField } = getValues(["mysel", "otherField"]);
// 获取整个表单的所有值
const allFormValues = getValues();

onChange vs Watch的选择 #

• 用onChange：适合字段变化时执行一次性逻辑（比如单次过滤操作），但必须和React Hook Form的内部逻辑兼容（参考方式一）。
• 用watch：适合需要实时响应字段值变化的场景（比如根据选择动态渲染组件、实时过滤数据），无需手动绑定事件，自动同步最新值。

完整修复代码示例 #

import { useForm } from "react-hook-form";
import { isEmail, isDate } from "validator";

const GoodForm = () => {
  const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm();

  const filtra_pavimento = () => {
    console.log("cheguei aqui");
    const valor = getValues("mysel");
    console.log("Valor selecionado:", valor);
  };

  return (
    <div className="app-container">
      <div className="form-group">
        <label>My Select</label>
        <select
          className={errors?.mysel && "input-error"}
          defaultValue="0"
          {...register("mysel", {
            validate: (value) => value !== "0",
            onChange: (e) => {
              register("mysel").onChange(e);
              filtra_pavimento();
            },
          })}
        >
          <option value="0">Select some option...</option>
          <option value="blebleble">blebleble</option>
          <option value="blablabla">blablabla</option>
        </select>

        {errors?.mysel?.type === "validate" && (
          <p className="error-message">É obrigatório preencher esse campo.</p>
        )}
      </div>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者João Pedro Oliveira