React 向事件处理程序传递参数

当你使用 ES6 class 语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。最佳实践需要为class 的方法绑定 this，我们在上篇文章已经谈到这个问题。事件处理函数还有一个问题就是传递参数。本文将介绍三种方式：

使用 bind 方法

该模式下，React 的事件对象 e 会被作为第二个参数传递，事件对象以及更多的参数将会被隐式的进行传递：

class Demo extends React.Component {
  handleSend(message, e) {
    console.log(message)
    console.log(e.target)
  }

  render() {
    const numbers = [1, 2, 3];
    return (
      numbers.map(id => {
        return (
          <button key={id} onClick={this.handleSend.bind(this, id)}>
            Delete
          </button>
        )
      })
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);

本示例中，我们使用 bind 为 onClick 事件绑定了 handleSend 方法，该方法第一个参数为 this，第二个参数为事件对象 e, 从左到右点击按钮会在浏览器的控制台打印“1”、“2”、“3”。

回调中使用箭头函数

该模式下，React 的事件对象 e 会被作为第二个参数传递，事件对象必须显式的进行传递：

class Demo extends React.Component {
  handleSend(message, e) {
    console.log(message)
    console.log(e.target)
  }

  render() {
    const numbers = [1, 2, 3];
    return (
      numbers.map(id => {
        return (
          <button key={id} onClick={(e) => this.handleSend(id, e)}>
            Delete
          </button>
        )
      })
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);

本示例中，我们在回调中使用箭头函数再调用 handleSend 方法，该方法第一个参数为 id，显式传递了第二个参数事件对象 e。从左到右点击按钮会在浏览器的控制台打印“1”、“2”、“3”。

回调中使用柯里化函数

该模式下，和箭头函数类似，只是箭头函数内调用的是柯里化函数。该柯里化函数第一个参数为事件对象 e。

柯里化函数就是我们给一个函数传入一部分参数，此时就会返回一个函数来接收剩余的参数。

class Demo extends React.Component {
  render() {
    const numbers = [1, 2, 3];
    const fn = e => message => {
      console.log(message);
      console.log(e.target);
    }
    return (
      numbers.map(id => {
        return (
          <button key={id} onClick={(e) => fn(e)(id)}>
            Delete
          </button>
        )
      })
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);

本示例中，我们在回调中使用箭头函数，再调用柯里化函数 fn，该函数在 React 的 render() 方法中声明，第一个参数为事件对象 e。从左到右点击按钮会在浏览器的控制台打印“1 Delete”、“2”、“3”。