有效地将点击侦听器添加到任意数量的元素

Question

我想在任意数量的元素和click事件处理程序内部监听click事件，我想检索有关被点击元素的一些信息（在元素创建过程中可以轻松访问的信息）。

这个问题的一个常见解决方案是：

render() {
  return (
    <div>
      {this.props.users.map(user => (
        <button onClick={() => this.buttonClicked(user.email)}>
          {user.name}
        </button>
      ))}
    </div>
  );
}

我在这种方法中看到的缺陷是我们正在为每个元素创建一个新函数。这是一个值得解决的问题吗？如果是，您对此解决方案有何看法：

render() {
  return (
    <div>
      {this.props.users.map((user, index) => (
        <button data-index={index} onClick={this.buttonClicked}>
          {user.name}
        </button>
      ))}
    </div>
  );
}

buttonClicked(event) {
  const { index } = event.currentTarget.dataset;
  const { email } = this.props.users[index];
  // ...
}

Answer 1

创建另一个组件并从中分派事件。

class Button extends React.PureComponent{
  handleOnClick = ()=>{
    const {onClick, ...rest} = this.props
    if(onClick typeof ==='function'){
      onClick(rest)
    }
  }
  render(){
    const {name} = this.props
    return (
      <button onClick={this.handleOnClick}>
        {name}
      </button>)
  }
}

...

render() {
  return (
    <div>
      {this.props.users.map(user => (
        <Button {...user} key={user.email} onClick={this.buttonClicked} />
      ))}
    </div>
  );
}

Answer 2

我认为最好使用已定义的函数而不是匿名/内联函数，否则只会在呈现阶段创建onClick处理程序。

在第二个示例中，您实际上可以将参数绑定到处理程序：

render() {
  return (
    <div>
      {this.props.users.map((user, index) => (
        <button data-index={index} onClick={this.buttonClicked.bind(this, user.email)}>
          {user.name}
        </button>
      ))}
    </div>
  );
}

其次，想指出拥有多个处理程序没有性能问题。 React uses one event handler at the root of your document。