React 18+中如何手动触发input的onChange回调？

情况一：普通文本类input #

直接修改input的value后，派发标准的input事件即可触发React的onChange回调：

import { useRef } from 'react';

function App() {
  const inputRef = useRef(null);

  const updateInputAndTriggerChange = () => {
    const newValue = 'path/test.ext';
    inputRef.current.value = newValue;
    
    // 派发input事件，触发React的onChange
    inputRef.current.dispatchEvent(new InputEvent('input', {
      bubbles: true,
      cancelable: true,
    }));
  };

  return (
    <div>
      <input ref={inputRef} onChange={(e) => console.log(e.target.value)} />
      <button onClick={updateInputAndTriggerChange}>触发变更</button>
    </div>
  );
}

React的onChange本质上监听的是原生input事件（文本类input），使用InputEvent构造事件比普通Event更贴合浏览器标准，能确保React合成事件正确捕获。

情况二：文件选择器（file类型input） #

由于浏览器安全限制，file类型input无法直接设置value，需通过构造FileList模拟选中文件，再派发change事件：

import { useRef } from 'react';

function FilePicker() {
  const fileInputRef = useRef(null);

  const simulateFileSelection = () => {
    // 创建模拟文件对象
    const mockFile = new File([''], 'test.ext', { type: 'application/octet-stream' });
    // 构造FileList
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(mockFile);
    const fileList = dataTransfer.files;

    // 设置input的文件列表
    fileInputRef.current.files = fileList;
    // 派发change事件触发回调
    fileInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
  };

  return (
    <div>
      <input 
        ref={fileInputRef} 
        type="file" 
        onChange={(e) => console.log('选中文件:', e.target.files[0])} 
        style={{display: 'none'}}
      />
      <button onClick={simulateFileSelection}>模拟选择文件</button>
    </div>
  );
}

注意事项 #

• 避免使用过时的事件构造方式（如仅创建无参数的Event），React新版本对合成事件的校验更严格，需确保事件包含bubbles等必要属性。
• 对于file input，必须通过DataTransfer构造合法的FileList，直接修改value会被浏览器安全策略拦截。

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