react事件绑定方式与传参问题

一、事件绑定方式
①在构造函数中绑定this,例如：

constructor(props){
        super(props);
        this.pageGoto=this.pageGoto.bind(this);
    }

②如果您使用实验性的 属性初始化语法，那么你可以使用属性初始值设置来正确地 绑定(bind) 回调：

class LoggingButton extends React.Component {
  // 这个语法确保 `this` 绑定在 handleClick 中。
  // 警告：这是 *实验性的* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

③箭头函数的方式：

<button onClick={(e) => this.handleClick(e)}>
        Click me
</button>

这个语法的问题是，每次 LoggingButton 渲染时都创建一个不同的回调。在多数情况下，没什么问题。然而，如果这个回调被作为 prop(属性) 传递给下级组件，这些组件可能需要额外的重复渲染。我们通常建议在构造函数中进行绑定，以避免这类性能问题。
二、传参问题
在循环内部，通常需要将一个额外的参数传递给事件处理程序。 例如，如果 id 是一个内联 ID，则以下任一方式都可以正常工作：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两行代码是等价的，分别使用 ·arrow functions和 Function.prototype.bind。

上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。