react事件处理，为类方法绑定this

react事件绑定属性的命名采用驼峰命名法，
如果采用JSX的语法，需要传入一个函数作为事件处理函数，而不是一个字符串（DOM元素的写法）。

阻止事件的默认行为：

不能使用返回false的方式来阻止默认行为，必须明确的使用preventDefault

在类方法中绑定this

注：要谨慎的在类方法中使用this，因为类方法默认不会绑定this。需要主动的将这类方法绑定到this上。

为类方法上绑定this的方法：

在构造方法中为类方法绑定this

class LoggingButton extends React.Component {
  constructor(props){
		super(props);
		
		//类方法，必须为每个类方法绑定this,否则在类方法总使用this时，会是undefined
		this.handleClick = this.handleClick.bind(this);
 }

  handleClick(){
    console.log('this is:', this);
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

属性初始化器语法

class LoggingButton extends React.Component {
  // 这个语法确保了 `this` 绑定在  handleClick 中
  // 这里只是一个测试
  handleClick = () => {
    console.log('this is:', this);
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

调函数中使用箭头函数：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
 
  render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

react事件处理，为类方法绑定this

猜你喜欢