### 在 React 中进行模拟触发输入

> 参考：https://github.com/facebook/react/issues/11488

在自动化测试或在线调试React项目中，会遇到直接修改input的valut值UI变化，但是内部state并没有修改的情况。因此需要hack方法来解决：

```javascript
let input = document.querySelector('xxx');
let lastValue = input.value;
input.value = 'xxx';
let event = new Event('input', {bubbles: true});
event.simulated = true;
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue)
}
input.dispatchEvent(event);
const enterKeyEvent = new KeyboardEvent('keypress', {
  key: 'Enter',
  keyCode: 13,
  code: 'Enter',
  which: 13,
  bubbles: true,
});
input.dispatchEvent(enterKeyEvent);
```

```javascript
const fileInput = document.querySelector('input[type="file"]');

async function simulateRemoteFileSelection(url) {
  const response = await fetch(url);
  const blob = await response.blob();

  const file = new File([blob], "file.mp4", {
    type: blob.type,
  });

  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(file);

  fileInput.files = dataTransfer.files;

  const event = new Event('change', {bubbles: true});
  fileInput.dispatchEvent(event);
}

simulateRemoteFileSelection('xxxx');
```