绑定事件

React绑定事件和原生HTML很像，有以下几点不同

1. 值是函数

在html事件的值是字符串，而react直接写成函数。

//html写法
<a onclick="infoTime()">
21:00
</a>
//React写法
<a onClick={infoTime}>
21:00
</a>

2. 阻止事件默认行为

原生html在事件函数里return false来阻止事件，React中使用e.preventDefault方法阻止。

比如上面的例子，点击a标签（需要加herf属性），默认会进行跳转，我们需要阻止跳转

infoTime(e){
　e.preventDefault()
　alert("21:00")
}

注：e是合成的，类似event

在类定义的组件中使用

我们给上篇的DEMO加上事件，初步代码如下，红色部分就是添加的事件

初步代码

实际运行发现弹出的是undefined，因为点击事件实际是window执行的，this.state.date中的this指向错误，我们期望this指向这个组件的实例，有2个方法，使用es5中的bind或者es6中的箭头函数。（关于this和bind不是很清楚的评论留言）

1. bind

在构造器中加红色部分代码，绑定这个函数，让infoTime中的this指向App

bind方式

2. 箭头函数

箭头函数会自动绑定作用域，如下图，用箭头函数代替

箭头函数方式

注：但箭头函数形式会在重新渲染时重新创建，可能造成性能问题，建议使用第一种方式

本篇内容到此结束，放出全部代码

完成代码

【提醒，关注后就能收到文章更新推送了】

【前方雾大，关注一下不迷路 = 。=】

【html】【css】【html】【css】【html】【javascript】【html】【javascript】【javacsript】【css】【javascript】【css】