React绑定事件使用的小驼峰命名法,在绑定函数的时候不能加(),否则函数会立即执行,不会管你事件是否触发。完整代码见案例文件
先来看bind绑定事件
<body>
<div id="app"></div>
</body>
<!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
<script type="text/babel">
class MySub extends React.Component {
/* 如下所有clickFunction方法如果this输出是undefined则绑定是失败的 */
clickFunction() {
console.log("触发事件-普通函数-bind绑定" + this);
};
clickFunction5 = (value) => {
console.log("触发事件-匿名函数-bind绑定2,参数:" + value + this);
};
render() {
return (
<div>
{/*使用bind进行绑定,点击后触发clickFunction()方法*/}
<button type={"button"} onClick={this.clickFunction.bind(this)}>
bind绑定
</button>
{/*使用bind进行绑定进行传参,点击后触发clickFunction()方法*/}
<button type={"button"} onClick={this.clickFunction5.bind(this, "hello")}>
bind绑定(传参)
</button>
</div>
);
};
};
ReactDOM.render(<MySub />, document.getElementById("app"));
</script>
使用箭头函数绑定事件
<script type="text/babel">
class MySub extends React.Component {
/* 如下所有clickFunction方法如果this输出是undefined则绑定是失败的 */
clickFunction2 = () => {
console.log("触发事件-匿名函数-箭头函数绑定" + this);
};
clickFunction4 = (value) => {
console.log("触发事件-匿名函数-箭头函数绑定2,参数:" + value + this);
};
clickFunction6 = (value, event) => {
console.log("触发事件-匿名函数-bind绑定2,参数:" + value + this);
console.log(event);
};
render() {
return (
<div>
{/*使用箭头函数进行绑定,点击后触发clickFunction2()方法*/}
<button type={"button"} onClick={this.clickFunction2}>
箭头函数绑定
</button>
{/*这种写法能带(),能传参,点击后触发clickFunction4()方法*/}
<button type={"button"} onClick={() => { this.clickFunction4("hi") }}>
箭头函数绑定2(可以传参)
</button>
{/*这种写法能带(),能传event,点击后触发clickFunction6()方法*/}
<button type={"button"} onClick={(event) => { this.clickFunction6("hi",event) }}>
箭头函数绑定3(传递event)
</button>
</div>
);
};
};
ReactDOM.render(<MySub />, document.getElementById("app"));
</script>
再来看构造器绑定,这个没啥用,看看就行
<script type="text/babel">
class MySub extends React.Component {
constructor(porps) {
super(porps);
//在构造函数里绑定事件
this.clickFunction3 = this.clickFunction3.bind(this);
};
clickFunction3 = () => {
console.log("触发事件-匿名函数-constructor绑定" + this);
};
render() {
return (
<div>
{/*在constructor里绑定,点击后触发clickFunction3()方法*/}
<button type={"button"} onClick={this.clickFunction3}>
constructor绑定
</button>
</div>
);
};
};
ReactDOM.render(<MySub />, document.getElementById("app"));
</script>