网页是组件构成的，组件是一系列标签形成的单一功能。所以考虑组件无非也就三件事，结构、表现、和行为。结构JSX搞定了（当然JSX不仅仅干这个），表现是CSS的事儿，我们重点说下行为，也就是事件和钩子。
事件好说，就是户干了啥事儿，然后有什么样的相应。钩子就是在组件怎么样的时候，干什么事儿。
本文先说事件，因为这个简单的让人发指，钩子用到了我们再说。
事件还是老话，你把原生组件我讲那篇文章看懂了，react就很轻松了，我们先走起一个例子。
大家可以直接使用我准备好的起始文件，替换你的src整个文件夹就行。
地址：https://github.com/leolau2012/react-basic-tutorial.git
React中事件的写法
先别管别的，我们现在RatingStar.js里面扔进去，以下：
import React, { Component } from 'react'
import './style.css'
class RatingStar extends Component {
constructor(props) {
super(props)
this.state = {
score: 0
}
}
handleClick(ev) {
console.log(ev.target);
}
render() {
return (
<div className="starbox">
<span data-index="0" onClick = {this.handleClick} className="on"></span>
<span data-index="1" onClick = {this.handleClick} className="on"></span>
<span data-index="2" onClick = {this.handleClick} className="on"></span>
<span data-index="3" onClick = {this.handleClick} className="on"></span>
<span data-index="4" onClick = {this.handleClick} className=""></span>
<strong className="score">4分</strong>
</div>
);
}
}
export default RatingStar;
这里要注意两点：
1.onClick = {this.handleClick} 这里的事件都要加on而且Click要大写
2.this.handleClick 需被单大括号包裹
this的问题
说重点了，但是往回看最开始的例子大家就知道代码是这样的：
handleClick(ev) {
this.setState({
score: Number(ev.target.dataset.index) + 1
});
}
但是，我们加上去以后居然报错了，
我们先看一眼this是谁，
大家先不用急，容我慢慢解释。
下面就是最重要的一个东西 -关于组件里面的this问题。
一般在某个类的实例方法里面的 this 指的是这个实例本身。但是在上面我们把 this 打印出来，你会看到 this 是undefined。
这是因为 React.js 调用你所传给它的方法的时候，并不是通过对象方法的方式调用（this.handleClick），而是直接通过函数调用 handleClick所以事件监听函数内并不能通过 this 获取到实例。而严格模式下直接全局调用一个函数，它的this是undefined。这里注意你可以不懂我说的上面这些话，但是你会解决就好了。这个在我们原生js组件又遇到过这个情况说后面解释。这里我们解释了。
解决this的指向
解决方案也简单：
handleClick = (ev)=> {
console.log(this);
}
这样就可以了，很多人会用bind 矫正this 我不建议，尽量大家多用箭头函数。
最终代码：
import React, { Component } from 'react'
import './style.css'
class RatingStar extends Component {
constructor(props) {
super(props)
this.state = {
score: 0
}
}
handleClick = (ev)=> {
console.log(this.setState);
this.setState({
score: Number(ev.target.dataset.index) + 1
});
}
render() {
return (
<div className="starbox">
<span data-index="0" onClick = {this.handleClick} className="on"></span>
<span data-index="1" onClick = {this.handleClick} className="on"></span>
<span data-index="2" onClick = {this.handleClick} className="on"></span>
<span data-index="3" onClick = {this.handleClick} className="on"></span>
<span data-index="4" onClick = {this.handleClick} className=""></span>
<strong className="score">4分</strong>
</div>
);
}
}
export default RatingStar;
最终大家会发现setState就有了，而且事件也好了。这篇文章我们讲事件怎么用，下篇我们说组件的 state 和 setState。
结语：
1.通过onClick事件在React中的使用，举一反三使用 React.js 提供了一系列的 on* 事件。
2.this调用不加括号，class变成className。
额外：将代码下载下来注意组件的组织。
