class ShowAlert extends React.Component {
    showAlert() {
        console.log(this);  // undefined
    }
    render() {
        return <button onClick={this.showAlert}>show</button>;
    }
}

为了解决没有绑定 this 问题，有四种方法。

// render 方法使用 this：
class App extends React.Component {
    handleClick() {
        console.log('this > ', this);
    }
    render() { // 每次 render 的时候 都会重新进行 bind 的绑定 影响性能
        return (
            <div onClick={this.handleClick.bind(this)}>test</div>
        )
    }
}
// render 中使用箭头函数
class App extends React.Component {
    handleClick() {
        console.log('this > ', this);
    }
    render() {
        return (
            <div onClick={e => this.handleClick(e)}>test</div>
        )
    }
}
// constructor 中使用 bind
class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        console.log('this > ', this);
    }
    render() {
        return (
            <div onClick={this.handleClick}>test</div>
        )
    }
}
// 函数定义阶段使用箭头函数
class App extends React.Component {
    constructor(props) {
        super(props);
    }
    handleClick = () => {
        console.log('this > ', this);
    }
    render() {
        return (
            <div onClick={this.handleClick}>test</div>
        )
    }
}