（React）绑定事件（this的使用）

前言

React开发中，给按钮添加点击事件，响应用户的点击

一、绑定事件

class App extends Component {
  respondsToClick () {
    // 这里this是undefined
    console.log(this)
  }
  render() {
    return (
      <div className="App">
        <div>aaaa</div>
        // 绑定事件
        <a onClick={this.respondsToClick}>点击增加</a>
      </div>
    );
  }
}
export default App;

按照上述的方式，在事件绑定的方法内部，是不能使用this的，因为

二、解决绑定方法内部的this调用问题

• 为方法绑定this

  constructor(props) {
    super(props)
    // 为方法绑定this
    this.respondsToClick = this.respondsToClick.bind(this)
  }

• 修改绑定方法的实现方式

  // 
  respondsToClick = () => {
    console.log(this)
  }

三、事件方法中传递参数

• 使用绑定的方式

class App extends Component {
  // 绑定方法，并接受参数
  respondsToClick(title, e) {
    console.log(this)  
    console.log(title)  // 传递的参数
    console.log(e)  // 点击的事件对象，默认是最后一个
  }
  render() {
    return (
      <div className="App">
        <div>aaaa</div>
        // 传递的参数(this, title, event)其中event是隐式的
        <a onClick={this.respondsToClick.bind(this, '点击')}>点击增加</a>
      </div>
    );
  }
}

• 使用箭头函数的方式

class App extends Component {

  respondsToClick(title, e) {
    console.log(this)
    console.log(title)
    console.log(e)
  }
  render() {
    return (
      <div className="App">
        <div>aaaa</div>
         // 传递的参数(title, event)
        <a onClick={(e) => this.respondsToClick('addd', e)}>点击增加</a>
      </div>
    );
  }
}