reactjs - 使用 Chrome 开发者工具触发 React 事件
问题描述
我想在 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
该元素上的 JS。
我该怎么做?
更新:以下建议的功能对我不起作用,还有其他建议吗?
解决方案
推荐阅读
- python - 仅在数据加载后抓取
- c - 包含路径不适用于 Bluez 库
- vectorization - 英特尔编译器内在函数
- kalman-filter - 卡尔曼滤波器中的 H 矩阵是什么
- python - jQuery Ajax 获取请求(具体数据)
- magento - Magento2 为接口编写插件
- c++ - 如何让 GCC/Clang 在保留标识符上出错
- python-3.x - gcp firestore上的python超时流方法
- python - Django 模型 RelatedObjectDoesNotExist
- python - 你如何调用一个类的属性,就好像它是一个变量(在python中)?