这里LikeButton.jsx为什么报错

Question

LikeButton.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { liked: false };
    }
    handleClick(event) {
        const nextCount = !this.state.liked;
        this.setState({ liked: nextCount });
    }
    render() {
        var text = this.state.liked ? '喜欢' : '不喜欢';
        return (
            <p onClick={this.handleClick}>
                你<b>{text}</b>我。点我切换状态。
            </p>
        );
    }
}

export default LikeButton;

Answer 1

onClick={this.handleClick}改为onClick={this.handleClick.bind(this)}

Answer 2

需要绑定this，因为执行的时候onClick相当于一个回调函数，这回调函数里面的this如果不绑定就成了undefined了，因此this.state.liked这一句就会报错，因此需要绑定this。
方式主要有两种：

1. 在constructor中绑定：
   this.handleClick=this.handleClick.bind(this)然后调用的时候onClick=this.handleClick就可以了
2. 也可以像上面回答那样在调用的时候绑定，但是有时候会出现问题。
   onClick=this.handleClick.bind(this)或者使用ES6箭头函数onClick=(e)=>this.handleClick(e);

具体的几种绑定的对比可以参考我的笔记：
https://segmentfault.com/a/11...

Answer 3

说个题外话，这个报错信息还是挺明显的，第十行state是null的属性，也就是this的属性。你就要找为什么this是null。函数内this指向null很可能是调用方法不对，再去找其他原因。
话说回来，出现这个问题也是读文档不认真造成的，在handling event这章着重强调了绑定this的重要性。