appcrash事件怎么解决_React实战—组件行为：React中的事件（4）

网页是组件构成的，组件是一系列标签形成的单一功能。所以考虑组件无非也就三件事，结构、表现、和行为。结构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。

额外：将代码下载下来注意组件的组织。