React中如何编程触发输入框onChange事件适配React Hook Form？

你遇到的核心问题是：手动调用setValue后触发的普通Event没被React Hook Form（RHF）的事件监听器正确捕获，且没有先同步输入框的实际value值。这里提供两种可行解决方案：

方案一：手动模拟用户输入流程（操作DOM） #

先同步输入框的value，再构造带target的InputEvent触发事件，确保RHF能捕获到完整的输入事件：

import { useForm, useRef } from 'react-hook-form';

export default function YourComponent() {
  const inputRef = useRef<HTMLInputElement>(null);
  const { register, setValue } = useForm({ mode: 'onChange' });

  const onManualChange = (value: number) => {
    if (!inputRef.current) return;

    // 先更新输入框的实际value
    inputRef.current.value = value.toString();
    // 构造带target的InputEvent（而非普通Event）
    const event = new InputEvent('input', {
      bubbles: true,
      cancelable: true,
      target: inputRef.current,
    });
    // 触发事件，RHF的onChange监听器会捕获并更新状态
    inputRef.current.dispatchEvent(event);
  };

  return (
    <div>
      <input {...register('inputName')} ref={inputRef} type="number" />
      <button onClick={() => onManualChange(10)}>设为10</button>
      <button onClick={() => onManualChange(20)}>设为20</button>
    </div>
  );
}

方案二：利用RHF原生配置（推荐） #

完全不需要操作DOM，直接通过setValue的配置参数触发onChange模式下的状态更新和验证：

import { useForm } from 'react-hook-form';

export default function YourComponent() {
  const { register, setValue } = useForm({ mode: 'onChange' });

  const onManualChange = (value: number) => {
    setValue('inputName', value, {
      shouldDirty: true, // 标记字段为已修改
      shouldValidate: true, // 触发onChange模式下的验证
      shouldTouch: true, // 标记字段为已触碰（可选，按需添加）
    });
  };

  return (
    <div>
      <input {...register('inputName')} type="number" />
      <button onClick={() => onManualChange(10)}>设为10</button>
      <button onClick={() => onManualChange(20)}>设为20</button>
    </div>
  );
}

原代码失效原因 #

1. 先调用setValue但未同步输入框的DOM value，触发事件时输入框实际值与RHF状态不一致；
2. 普通Event未携带完整target信息，RHF事件处理函数无法正确读取输入值；
3. 方案二更贴合RHF设计理念，避免直接操作DOM的潜在问题。

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