我正在构建一个供我个人使用的小型 Chrome 扩展程序。
在 Facebook 的广告管理器（使用 React）中，我想将 textarea 字段的值更改为由我的 chrome 扩展程序生成的值。
我试过像这样用旧时尚的方式
document.querySelector('textarea').value = myValue;
这会更改屏幕上的值，但在 chrome 的检查元素中，该值不会更改，当我专注于输入元素时，值会重置。
这是 React 组件的外观图片：
![1]](https://i.stack.imgur.com/AkdGW.png)
这是react组件props和状态的图片：
![2]](https://i.stack.imgur.com/v3BNI.png)
在上面的组件中，我想将 state.displayValue 更改为我的值。
怎么办？
如前所述，您需要通知 react 有关您的手动更改。然而，对于 React 16，这并不是那么简单。
const element = document.querySelector('textarea')
const event = new Event('input', { bubbles: true })
const previousValue = element.value
element.value = 'next value'
element._valueTracker.setValue(previousValue)
element.dispatchEvent(event)
这是一个带有源代码的工作代码和框。
要仅查看演示，您可以打开此链接并window.triggerChange('new value')直接从浏览器开发工具控制台调用函数。
你会看到 ReactonChange和setState事件被触发！🎉
需要通知@Bandal react 输入值已更改。更新值后，您将需要调度更改事件。
document.querySelector('textarea').value = myValue;
const event = new Event('input', { bubbles: true })
document.querySelector('textarea').dispatchEvent(event)
原答案在这里