致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第九节
React事件
- react事件:绑定事件的命名是驼峰命名法。第二个单词大写
- {}传入一个函数,不能直接写字符串
事件对象
react返回的事件对象是代理的原生的事件对象
如果想要查看事件对象的具体值,必须直接输出事件对象的属性
注意:
原生阻止默认行为:return false;
React中阻止默认必须使用e.preventDefault()
React事件传参
通过一个匿名的箭头函数
本节代码
import React from 'react';
import ReactDOM from 'react-dom';
class ParentCom extends React.Component {
constructor(props) {
super(props);
}
parentEvent = (e) => {
console.log(e);
e.preventDefault();
}
parentEvent1 = (msg,e)=>{
console.log(msg);
console.log(e);
}
render() {
return (
<div>
<form action="http://www.baidu.com">
<div className="child">
<h1>Hello world</h1>
<button onClick={this.parentEvent}>提交</button>
</div>
</form>
<button onClick={(e)=>this.parentEvent1('msg:hello',e)}>提交</button>
{/* 不使用ES6 */}
<button onClick={function(e){this.parentEvent1('不使用es6:msg:hello',e)}.bind(this)}>提交</button>
</div>
)
}
}
ReactDOM.render(
<ParentCom />
,
document.querySelector("#root")
)