Javascript React JS-处理儿童点击事件的好方法是什么？

我有一个清单，里面有大约2k个项目。如果我在每个孩子身上使用onClick，我将得到2k个侦听器，这就是我目前拥有的。我想做一些事情，比如让父组件监听click事件。但是如果我这样做，我就没有需要调用setState的子组件的引用。还可以动态筛选子组件列表（使用this.refs可能不好？）

我能想到的最好办法是将子组件id映射到父组件中的子组件，并在单击时查找视图

仅出于说明目的：

  var Parent = React.createClass({
      shouldComponentUpdate: function() { return false; },
      handler: function(e) {
         // look up from reference and set state   
      },
      componentWillUnmount: function() {
        // clean up reference   
      },
     render: function() {
       this.reference = {};
       var items = [];
       for(var i = 0; i < this.props.items.length; i++) {
         var child = React.createClass(Child, {id: this.props.items[i].id});
         items.push(child);
         reference[child.id] = child; 
       }
         return React.createClass('div', {onClick: this.handler}, items);
     }
  })

var Parent=React.createClass({
shouldComponentUpdate:function（）{return false；}，
处理程序：函数（e）{
//从引用中查找并设置状态
},
componentWillUnmount:function（）{
//清理参考
},
render:function（）{
this.reference={}；
var项目=[]；
对于（var i=0；i

---

我想知道是否有办法处理这件事

实现这一点的方法是使用Flux dispatcher+Store。基本上，您可以将每个项目绑定到一个事件，一旦商店执行了您希望它完成的任务，就会触发该事件

因此，流程将是：

Item gets clicked=>Flux event is dispatched=>Flux dispatcher听到事件并使用从Item组件传递的数据执行适当的函数

---

我想这个答案可能会有帮助。。。不管您有2000个事件处理程序还是只有一个事件处理程序。React以同样的方式处理它。请记住，在呈现方法中返回的HTML不会添加到DOM中，而只是由React用于构建虚拟DOM表示。最后，React只有一次onClick

---

如果你需要知道是什么元素触发了点击，你只需要访问event.target并使用任何数据属性来识别点击的元素。

基于@damianmr的答案，这里是

var Child=React.createClass({
应更新组件（下一步）{
如果（this.props.text！==nextrops.text）返回true；
如果（this.props.active！==nextrops.active）返回true；
返回false；
},
render（）{
var className='Child'；
if（this.props.active）className+='Child active'；
返回(
{this.props.text}
);
}
});

var Parent=React.createClass({
getInitialState（）{
返回{active:-1}；
},
设置活动（id）{
this.setState（{active:id}）；
},
render（）{
返回(
{this.props.items.map（（item）=>{
返回(
this.setActive（item.id）}
text={'myid为'+item.id}
key={item.id}
/>
);
})}
);
}
});

您是否看过如何使用密码？您可以避免让这么多的侦听器使用dispatcher+Store。我没有使用完全成熟的Flux。但我用的是类似的东西。然而，如果孩子要在点击时创建一个动作，我想点击时必须有一个监听器。哦，我明白你的意思了。这样我就可以把参考资料搬到商店里去了。所以每件商品都要订阅mount上的商店。是的，没错……我将模拟一个代码示例，作为一个答案，Flux在这里把事情复杂化了。您已经将可能是无状态项组件的组件转换为从存储区获取数据并分派操作的项组件。另外，您仍然有2000个onClick处理程序和额外的2000个存储更改事件侦听器！人们，如果你不理解一个框架，就不要盲目地实现它！但本文指出：

问题并不在于创建函数是一项昂贵的操作。这是因为，通过每次创建一个新函数，您将其传递给的组件每次都会看到该道具的新值…

  var ItemStore = {
    doSomething: function(data){
      // do something with the data
    }
  }
  MicroEvent.mixin(ItemStore);

  var AppDispatcher = new Dispatcher();

  AppDispatcher.register(function(payload) {

    switch (payload.eventName) {
      case 'item-clicked':
        ItemStore.doSomething(payload.data.someData);
        ItemStore.trigger('did-something');
    }

    return true;

  })


  var Item = React.createClass({
      shouldComponentUpdate: function() { return false; },
      componentDidMount: function() {
        ItemStore.bind('did-something', this.submitHandled);
      },
      handler: function(e) {
        AppDispatcher.dispatch({
          eventName: 'item-clicked',
          data: {
            someData: 'sample data'
          }
        });
      },
      componentWillUnmount: function() {
        // clean up reference   
      },
      submitHandled: function() {
        // do something after the click
      },
     render: function() {
       // insert your item's html here. 
     }
  })

var Child = React.createClass({
  shouldComponentUpdate(nextProps){
    if (this.props.text !== nextProps.text) return true;
    if (this.props.active !== nextProps.active) return true;
    return false;
  },
  render(){
    var className = 'Child';
    if (this.props.active) className += ' Child-active';

    return (
      <div {...this.props} className={className}>
        {this.props.text}
      </div>
    );
  }
});

var Parent = React.createClass({
  getInitialState(){
    return {active: -1};
  },

  setActive(id){
    this.setState({active: id});
  },

  render(){
    return (
      <div>
        {this.props.items.map((item) => {
         return (
           <Child
             active={this.state.active === item.id}
             onClick={() => this.setActive(item.id)}
             text={'My id is ' + item.id}
             key={item.id}
           />
         );
        })}
      </div>
    );
  }
});