React的事件处理

一个简单的例子

//Button.js
import React from "react";
import ReactDOM from "react-dom";

class Button extends React.Component{
    handleClick(e){
        console.log(e);
        console.log("hello world");
    }
    render(){
        return <button onClick={this.handleClick}>sayHi</button>
    }
}


ReactDOM.render(<Button/>,document.getElementById("root"));

• React里的 事件对象 不是 原生事件对象，而是 合成事件对象。
  
• 例子中的Button组件是一个class组件，也可以将它写成一个function组件

function Button(){
    function handleClick(e){
        console.log(e);
        console.log("hello wolrd");
    }
    return <button onClick={handleClick}>sayHi</button>
}

一个典型的例子

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

class Toggle extends  React.Component{
    constructor(props){
        super(props);
        this.state = {
            isToggleOn:false
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        this.setState((state) => ({
            isToggleOn:!state.isToggleOn
        }))
    }
    render(){
        return (
        <button onClick={this.handleClick}>{this.state.isToggleOn?'ON':'OFF'}</button>
        )
    }
}
ReactDOM.render(<Toggle/>,document.querySelector('#root'));

• setState()既可以接受一个对象为参数，也可以接受一个函数为参数

//接受一个对象作为参数
        this.setState({
            isToggleOn:!this.state.isToggleOn
        })

//接受一个函数作为参数
        this.setState((state) => ({
            isToggleOn:!state.isToggleOn
        }))

• 绑定this
  有两种方式。
  • 第一种：在构造函数中使用bind为handleClick绑定this
this.handleClick = this.handleClick.bind(this)
  • 第二种：使用箭头函数
    <button onClick={()=>this.handleClick()}></button>
    函数是一个对象，箭头函数当然也是一个对象。组件每次更新时，都会认为这里产生了一个新的函数对象，所以会重新渲染。但显然，重新渲染是不必要的。因此，在onClick中使用 箭头函数来绑定this，不推荐 。

不论 原生事件处理程序，还是React事件处理程序，第一个参数 都是 事件对象，且只有这一个参数。
但是，如果想向事件处理程序中传入其他参数，该怎么办？
这就和 绑定this所选择的方式 有关了。

• 如果选择 在构造函数中使用bind 绑定this，就这么写。

    handleClick(txt,e){
        this.setState((state) => ({
            isToggleOn:!state.isToggleOn
        }));
        console.log(txt);
    }

    render(){
        return (
        <button onClick={this.handleClick.bind(this,'hello world')}>{this.state.isToggleOn?'ON':'OFF'}</button>
        )
    }

• 如果 选择 使用箭头函数 绑定this，就这么写。

    handleClick(txt,e){
        this.setState((state) => ({
            isToggleOn:!state.isToggleOn
        }));
        console.log(txt);
    }

    render(){
        return (
        <button onClick={(e)=>this.handleClick("hello world",e)}>{this.state.isToggleOn?'ON':'OFF'}</button>
        )
    }