使用 javascript （Tampermonkey 脚本）在 React 输入中输入文本？

Question

我正在尝试制作一个 Tampermonkey 脚本，它会自动将文本输入到某些表单输入字段中。

通常，您只需执行以下操作即可：

myElement.value = "my new text"

问题是，这个表单正在使用 React，我无法直接更改该值，因为它没有设置 React 状态。我如何将所需的数据输入到我的 Tampermonkey 脚本中的这些 React 组件中？

Answer 1

答案可以在那里找到https://github.com/facebook/react/issues/11488#issuecomment-347775628

\n\n

let input = someInput; \nlet lastValue = input.value;\ninput.value = \'new value\';\nlet event = new Event(\'input\', { bubbles: true });\n// hack React15\nevent.simulated = true;\n// hack React16 \xe5\x86\x85\xe9\x83\xa8\xe5\xae\x9a\xe4\xb9\x89\xe4\xba\x86descriptor\xe6\x8b\xa6\xe6\x88\xaavalue\xef\xbc\x8c\xe6\xad\xa4\xe5\xa4\x84\xe9\x87\x8d\xe7\xbd\xae\xe7\x8a\xb6\xe6\x80\x81\nlet tracker = input._valueTracker;\nif (tracker) {\n  tracker.setValue(lastValue);\n}\ninput.dispatchEvent(event);\n

\n

Answer 2

React 不会公开组件实例，因此如果可能的话，在初始化时不篡改应用程序就无法访问它们。

输入值应该像使用普通 JavaScript 一样通过发出 DOM 事件来更改。

React 提供了具有辅助函数的实用程序库来执行此操作。

这是一个例子。输入：

<input id="input" value={this.state.name} onChange={e => this.setState({ name: e.target.value })} />

以及在 React 应用程序初始化后运行的用户脚本：

import { Simulate } from 'react-dom/test-utils';

const input = document.getElementById('input');
input.value = 'Foo';
Simulate.change(input);