React 18+中手动触发onChange回调

Question

问题是我无法在 React 中的输入组件上手动触发 onChange 回调。我有一个自定义的“文件选择器”，它可以更改新选定文件路径的输入值。我想为此输入手动调度“更改”/“输入”事件。

案例示例：

<input onChange={(e) => console.log(e.target.value)} />

const inputRef = /* ref of input above */

/* .. */
const newValue = 'path/test.ext';
inputRef.current.value = newValue;
// dispatch change event for inputRef.current to console log new value

我想指出的是，我已经研究过这个主题。我能找到的最新解决方案是：https://stackoverflow.com/a/71340077/14175627

可悲的是，这个解决方案不再有效而且我无法找到有效的解决方案。

Answer 1

此解决方案使用可能会发生变化的 React 内部结构

如果输入值自上次调用以来没有更改，

React 会阻止额外的

onChange

调用。 请参阅

updateValueIfChanged

，它是从 ChangeEventPlugin

调用的

通过更改值跟踪器中存储的值，我们可以强制触发

onChange

const fakeValue = 'some-unlikely-fake-value'

const triggerChangeEvent = (input) => {
  const tracker = input._valueTracker
  if (tracker) {
    tracker.setValue(fakeValue)
  }
  const event = new Event('change', { bubbles: true })
  input.dispatchEvent(event)
}

// Render it
ReactDOM.createRoot(
  document.getElementById("root")
).render(
  <div>
    <input type="text" id="input" onChange={(e) => console.log('change', e.target.value)} />

    <button type="button" onClick={() => {
      const inputEl = document.querySelector('#input')
      inputEl.value += ' changed'
      triggerChangeEvent(inputEl)
     }}>
      Trigger change
    </button>
  </div>
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>