Question

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

通常，您可以使用以下方法做到这一点：

myElement.value = "my new text"

问题是，这种形式使用的是React，由于无法设置React状态，因此我无法直接更改该值。如何在我的Tampermonkey脚本中将所需的数据输入到这些React组件中？< / p>

Answer 1

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

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

React提供了utility library，该功能具有帮助功能。

这里是an example。输入：

public Role() {

}

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

public Role(String string) {

}

Answer 2

class HelloWorld extends React.Component{
  constructor(props){
    super(props);
    this.state = {firstname: ''};
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e){
   this.setState({firstname: e.target.value})
  }
  render(){
   return(<div><input id="firstname" type=text onChange={(e) =>this.handleChange()} value={this.state.firstname} ></div>) 
 }
}

Answer 3

可以在https://github.com/facebook/react/issues/11488#issuecomment-347775628

处找到答案

let input = someInput; 
let lastValue = input.value;
input.value = 'new value';
let event = new Event('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16 内部定义了descriptor拦截value，此处重置状态
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue);
}
input.dispatchEvent(event);

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

3 个答案: