javascript - 使用 Chrome 扩展中的 jQuery/Plain Javascript 修改 React 组件的状态

Question

我正在构建一个小型 Chrome 扩展程序供我个人使用。

在 Facebook 的广告管理器(使用 React)中，我想将 textarea 字段的值更改为由我的 chrome 扩展程序生成的值。

我试过像这样用老式的方式做

document.querySelector('textarea').value = myValue;

这会改变屏幕上的值，但在 chrome 的检查元素中，该值不会改变，当我关注输入元素时，值会重置。

这是 React 组件的图片:

这是这个 react 组件 Prop 和状态的图片:

在上面的组件中，我想将 state.displayValue 更改为我的值。

如何实现？

Answer 1

如前所述，您需要将您的手动更改通知 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 事件被触发! 🎉