使用Chrome扩展程序中的jQuery /纯Java脚本修改React组件的状态

Question

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

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

我尝试过像这样的旧时尚方式

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

这会更改屏幕上的值，但在chrome的inspect元素中，该值不会更改，并且当我专注于输入元素时，值会重置。

这是react组件的外观图：

这是此反应组件道具和状态的图片：

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

怎么做？

Answer 1

如前所述，您需要通知您有关手动更改的信息。 但是，使用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)

这是一个带有源代码的有效codeandbox 。
要仅查看演示，可以打开此链接并直接从浏览器开发工具控制台调用window.triggerChange('new value')函数。

您将看到React的onChange和setState事件被触发！ 🎉

Answer 2

@Bandal react需要通知输入值已更改。 更新值后，您将需要调度一个更改事件。

    document.querySelector('textarea').value = myValue;
    const event = new Event('input', { bubbles: true })
    document.querySelector('textarea').dispatchEvent(event)

原始答案在这里