小鸡啄米之React事件处理

事件绑定

在一个事件发生时调用特定的处理逻辑，将逻辑与事件绑定起来

绑定方式有三种：

• 构造绑定
• 就近绑定
• 自动绑定

构造绑定

这种方式使用时在构造函数中对组件内部的方法进行绑定

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

注意：prevState表示react组件的前一个状态，只有在this.setState中才存在该变量

state与prevState区别：
在同一个函数即作用域中：this.state的值始终保持不变，即进入该函数前就已经确定了，当在函数中对state进行改变时，改变的值被放入prevState中保存，state值在离开该作用域时才会更新（prevState->state）
最明显的区别就是在同一个作用域中多次更新state：

	this.setState(prevState => {
		console.log('prevState',prevState,'state',this.state)
 		return({a: this.state.a+1 })
 	});
     this.setState(prevState => {
       console.log('prevState',prevState,'state',this.state)
       return({a: this.state.a+1})
	});

第一次输出：prevState,0,state,0
第二次输出：prevState,1,state,0

类方法默认不会绑定this（不包括箭头函数），如果需要在方法内部使用this，则必须手动bind绑定。推荐使用箭头函数自动绑定。bind用法

注意：在事件中：如果函数要传值，不能直接写括号传参数，会导致立即执行，如果需要传参，可以采用匿名箭头函数包装一层：<button onClick={()=>{this.handleClick(this.state.a)}}>

注意：不仅可以在button中绑定onClick事件还可以在其他的，比如
<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>

就近绑定

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

自动绑定

 handleClick = () => {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }

事件传参

传参方式有两种：箭头函数传递和bind传递

箭头函数传递

示例：<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
这个没啥讲的

bind传参

示例：<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
参考代码：

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    render(){
        return (
            <div>
                <p>hello</p>
                /* 通过 bind() 方法传递参数。 */
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

注意：bind方式向监听函数传参，监听函数定义在组件中，函数入参列表中：e必须放在传参的后面！！