react 开始 五 click

class A extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        //这里要给class的函数绑定this 后面的button里面才找的到this
    }
    handleClick() {

    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}></button>
            </div>
        )
    }
}
class B extends React.Component {
    constructor(props) {
        super(props)
        //这里不给class的函数绑定this 后面的button里面才绑定this 可以带参数
    }
    handleClick(i, e) {
        //i==1 e在最后面
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick.bind(this, 1)}></button>
            </div>
        )
    }
}
class C extends React.Component {
    constructor(props) {
        super(props)
    }
    handleClick(i, e) {
        //i==1
    }
    render() {
        return (
            <div>
                {/**这种bind this写前面 参数写后面 */}
                <button onClick={this.handleClick.bind(this, 1)}></button>
                {/**这种不写this e要显式写且写在参数列表最后 */}
                <button onClick={(e) => handleClick(66, e)}></button>
            </div>
        )
    }
}
class D extends React.Component {
    constructor(props) {
        super(props)
    }
    //这种写法 我感觉最简便 但是好像ES7的 不太确定是不是会失灵
    handleClick = (i,e) => {
        alert(i)       
    }

    render() {
        return (
            <div>
                <button onClick={(e) => handleClick(66, e)}></button>
            </div>
        )
    }
}
ReactDOM.render(
    <div>
        <A />
    </div>
    ,
    document.getElementById('example')//
);