深入了解React（四、事件处理方式一）

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

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';

class Component extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: 'Yuusuke',
            age: 18
        };
        // 注意这里的this指向问题
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
            age: this.state.age + 1
        })
    }

    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old!</p>
                <button onClick={this.handleClick}>年龄加一</button>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <Component></Component>
    </div>,
    document.getElementById('app')
);