Reactjs 使用Chrome开发者工具触发React事件

Reactjs 使用Chrome开发者工具触发React事件,reactjs,Reactjs,我想在chrome开发者工具中触发一个事件,但我是新手,我发现这比在JS中更难做到 我举了一个例子: 类名称表单扩展了React.Component{ 建造师(道具){ 超级(道具); 此.state={ 值:“” }; this.handleChange=this.handleChange.bind(this); this.handleSubmit=this.handleSubmit.bind(this); } 手变(活动){ 这是我的国家({ 值:event.target.value })

我想在chrome开发者工具中触发一个事件,但我是新手,我发现这比在JS中更难做到

我举了一个例子:

类名称表单扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
值:“”
};
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}
手变(活动){
这是我的国家({
值:event.target.value
});
}
handleSubmit(事件){
警报(“已提交名称:”+this.state.value);
event.preventDefault();
}
render(){
报税表(<
提交表格={
这是我的手稿
} >
<
标签>
姓名:
<
输入类型=“文本”
值={
这个。状态。值
}
onChange={
这是我的手机换
}
/> <
/标签><
输入类型=“提交”
value=“提交”/>
<
/表格>
);
}
}
ReactDOM.render(<
div>
, document.getElementById('root')) ); //自v15.6.0以来不工作 var ev=新事件(“输入”{ 泡泡:真的 }); document.querySelector('form:first child input')。value='notworking'; document.querySelector('表单:第一个子输入').dispatchEvent(ev); var ev2=新事件(“输入”{ 泡泡:真的 }); ev2.simulated=true; document.querySelector('form:last child input')。值='With simulated flag';
document.querySelector('form:last child input').dispatchEvent(ev2)
componentDidMount(){window.myDebugCls=this}怎么样?然后,您可以调用此组件的react类实例上的方法。这显然只是为了调试:)您应该尽量避免直接的DOM操作。有时候这很好,但说来话长。如果你能使用react方法,我建议你。它有助于保持组件生命周期中所有内容的上下文,但我不明白,您能使用我给出的示例吗?你是说我应该在ChromeWebTools控制台中挂载这个类,然后调用处理函数?