使用Chrome开发人员工具触发React事件

Question

我想在chrome开发人员工具中触发一个事件，但我是新来的人，发现它比JS难做。

我有这个例子：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return ( <
      form onSubmit = {
        this.handleSubmit
      } >
      <
      label >
      Name:
      <
      input type = "text"
      value = {
        this.state.value
      }
      onChange = {
        this.handleChange
      }
      /> <
      /label> <
      input type = "submit"
      value = "Submit" / >
      <
      /form>
    );
  }
}

ReactDOM.render( <
  div > < NameForm / > < NameForm / > < /div>,
  document.getElementById('root')
);

//  doesn't work since v15.6.0
var ev = new Event('input', {
  bubbles: true
});
document.querySelector('form:first-child input').value = 'Not working';
document.querySelector('form:first-child input').dispatchEvent(ev);

var ev2 = new Event('input', {
  bubbles: true
});
ev2.simulated = true;
document.querySelector('form:last-child input').value = 'With simulated flag';
document.querySelector('form:last-child input').dispatchEvent(ev2);

让我们说我想在控制台中运行某些东西，该操作将触发相同的操作，就像我按下了提交按钮一样，该按钮相当于该元素上的.click。

我该如何做出反应？

更新： 下面建议的功能对我不起作用，还有其他建议吗？