react入坑之事件

1 基本用法

在React中绑定事件跟直接在HTML中绑定事件非常相似，定义一个事件处理函数，并在JSX中绑定它：

function Greeting () {
  function sayHi(e) {
    e.preventDefault()
    console.log('Hi!')
  }
 return (
    <a onClick={Greeting}>Click me to say hi!</a>
 )
}

 
 

  
  
所有事件绑定属性比如onClick均使用驼峰写法（camelCase），事件绑定属性的值不是字符串而是事件处理函数名称，可以带上()并传参，无参数时可省略()；

  
  
2 使用类定义组件时事件处理函数this的指向问题

  
  
使用ES6的class特性定义组件时，通常的做法是将事件处理函数当作该类的方法写在类中。但需要注意的是方法的this指向。

  
  
定义在类中的方法的默认的this指向的是当前的类的实例，但事件处理函数因为是绑定到了具体的元素上，就会丢失定义时this的指向。如果你的处理函数中使用了this关键字来指向当前组件实例，那么你需要手动将该方法的this绑定到当前组件实例，有三种方法可以进行绑定：

  
  
1）在类的constructor中调用或在JSX中调用Function.prototype.bind()手动绑定
 
 

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this); // 手动绑定
  }

  handleClick() {
    // console.log(this)
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      // <button onClick={this.handleClick.bind(this)}> // 在这里绑定也可以
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('content')
);

2）在JSX的事件绑定属性中的事件处理函数外层再套一个箭头函数，在其中返回处理函数调用结果

render() {
  return (
    <button onClick={(e) => this.handleClick(e)}> // 这么绑定也行
      Click me
    </button>
  );
}

3）Babel提供的一个ES8+的实验性质的写法

class LoggingButton extends React.Component {
  handleClick = () => { // 纯粹的实验性质的写法，需要babel的支持
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

 
 

  
  
3 事件对象

  
  
React的事件对象是一个完全由React给出的事件对象，该对象对各个浏览器做了兼容，同时保留了标准事件对象的接口，详细信息可以查看React官网的参考。使用时需要关心的是如何在事件处理函数中使用事件对象。

  
  
在事件绑定的JSX中，处理函数接受一个名为event的参数来表示事件对象，可以认为event在事件绑定插值中属于React的保留字，如果需要往事件处理函数中传递更多参数，请使用其他标识符。

  
  
另外，7.2小节中不同的事件绑定写法也对事件对象的处置略有不同，主要体现在事件绑定JSX中：
 
 

// 无括号
<button onClick={this.handleClick}>
  Click me
</button>

// 带括号
<button onClick={this.handleClick(event)}>
  Click me
</button>

// 调用了bind()
<button onClick={this.handleClick.bind(this, event)}>
  Click me
</button>

 
 

  
  
当事件绑定插值中的处理函数省略了()时，处理函数默认接受一个表示事件对象的参数，
当事件绑定插值中的处理函数未省略()时，则需要显示地使用保留字event来传入事件对象，未传入则为undefined；注意，不管有没有在constructor中绑定this，直接在处理函数名后加()会导致页面初始化时该函数被立即执行一次，可能会有意想不到的错误，比如不能调用setState()方法等，所以强烈不建议用这种写法

当事件绑定插值中的处理函数调用了bind()时，可以显示地使用保留字event来传入事件对象，否则React会在bind()函数参数序列的末尾默认增加一个表示事件对象的参数


  
  
最后，在React中不能通过return false来阻止默认事件，而是需要在事件处理函数中显式调用event.preventDefault()。