我正在构建一个小型 Chrome 扩展程序供我个人使用。
在 Facebook 的广告管理器（使用 React）中，我想将 textarea 字段的值更改为我的 chrome 扩展生成的值。
我尝试过像这样的老式方式
document.querySelector('textarea').value = myValue;
这会改变屏幕上的值，但在 chrome 的检查元素中，值不会改变，当我专注于输入元素时，值会重置。
这是 react 组件的样子：
这是这个反应组件道具和状态的图片：
在上面的组件中，我想将 state.displayValue 更改为我的值。
怎么做？
【问题讨论】：
标签： javascript jquery reactjs
如前所述，您需要将手动更改通知 react。然而，对于 React 16，这是not so straightforward。
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)
这是一个有效的codesandbox 源代码。
要仅查看演示，您可以直接从浏览器开发工具控制台打开 this link 并调用 window.triggerChange('new value') 函数。
您将看到 React 的 onChange 和 setState 事件被触发！ ?
【讨论】：
document.querySelector('div.ghosted-input__field__main > input') 并按预期执行脚本 - 电子邮件字段值已更新，提交表单包括更新的电子邮件。选择器来自 Chrome 开发工具，修剪到最后几个条目
element.value = 'somevalue'; element.dispatchEvent(new Event('change'));
input 事件作为 textareas 和 blur 输入
@Bandal react 需要通知输入值已更改。更新值后，您需要发送一个更改事件。
document.querySelector('textarea').value = myValue;
const event = new Event('input', { bubbles: true })
document.querySelector('textarea').dispatchEvent(event)
原答案here
【讨论】：