处理动态生成的元素中的点击

Question

我几次注意到这种模式，并开始想知道处理它的正确方法是什么。

假设我有一个对象数组，我需要为其生成相应的可点击元素。在点击处理程序中，我想访问相应的对象。

render() {
  links = this.props.links.map(link => {
    <a
      onClick={this.clickHandle}>
      {link.title}
    </a>
  })
  // ...
}

但是，使用这种方法，当用户单击链接时，将调用 clickHandle 方法而没有任何有关 link 对象的相关信息。因此，为了访问相应的对象，我使用了clickHandle 中的闭包属性并以这种方式重写了它：

onClick={this.clickHandle(link)}
// ...
clickHandle(link) {
  return () => {
    alert(link)
  }
}

虽然它按预期工作，但我想知道它是否真的是正确的方法。每次 React 重建这段 dom 时，我似乎都在创建很多中间函数。这是一个坏习惯吗？有什么替代品？

Answer 1

什么是替代品？

创建一个链接组件，获取数据作为道具并将其传递给点击处理程序：

var Link = React.createClass({
    propTypes: {
        data: ...,
        onClick: React.PropTypes.func.isRequired,
    },

    _onClick: function() {
        this.props.onClick(this.props.data);
    },

    render: function() {
        return (
            <a
                onClick={this._onClick}>
                {this.pops.data.title}
            </a>
        );
    }
});

用法：

links = this.props.links.map(
    link => <Link key={...} data={link} onClick={this.clickHandle} />
);

Answer 2

尽管它仍然创建中间函数，React way 是使用.bind()。

render() {
  links = this.props.links.map(link => {
    <a
      onClick={this.clickHandle.bind(this, link}>
      {link.title}
    </a>
  })
  // ...
}