react学习小记-事件处理

this绑定问题

1.为了在回调函数中使用this，需要在constructor中手动绑定this

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

2.如果觉得使用 bind 很麻烦，这里有两种方式可以解决。

• class fields 语法

• class LoggingButton extends React.Component {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    // 注意: 这是 *实验性* 语法。
    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() {
      // 此语法确保 `handleClick` 内的 `this` 已被绑定。
      return (
        <button onClick={() => this.handleClick()}>
          Click me
        </button>
      );
    }
  }

• 此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

向事件处理程序传递参数

1.通过箭头函数方式

handleClick = (id, e) => {
  console.log(id, e);
}

<button onClick={(e) => this.handleClick(id, e)}>点击</button>

2.通过bind方式

handleClick = (id, e) => {
  console.log(id, e);
}

<button onClick={this.handleClick.bind(this, id)}>点击</button>

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

扩展，第三种传参方式：

 <button onClick={this.handleClick(id)}></button>

handleClick = (id) => {
  return (e) => {
    console.log(id, e);
  }
}