ReactJS-附加在元素列表上的点击事件正在触发“;点击“;用于列表中的所有元素

我在ul元素下有一组li元素（如下图所示），当我点击任何li元素时，我希望它为它附加一个类名。然而，当我单击任何li元素，所有li元素的点击事件都会被触发，class会附加到所有li元素。

ul
----li onclickEvent 
----li onclickEvent 
----li onclickEvent 
----li onclickEvent 
----li onclickEvent 

我该怎么解决这个问题？有没有我可以学习的例子？

var k=0;
var children = function(d,clO){
  var newClassName = "class1";
  if(clO.state.class1){
    var variableClassName = newClassName;
  }else{
    var variableClassName = "";
  }
  var toggle = function(e){
    e.stopPropagation();
    e.preventDefault();
    clO.setState({class1: !clO.state.class1});
    if(clO.state.class1){
      variableClassName = newClassName;
    }else{
      variableClassName = "";
    }
  };
  var span = React.DOM.span({"className":variableClassName, key:"s"+d.s, onClick: toggle },null);
  return [span];
};
var parent = function(d,clO,inv){
  k = k+1;
  var l = [];
  for(var i=0; i<d.length;i++){
    l.push(React.DOM.li({key:"ul_"+k+"li_"+i}, children(d[i], clO)));
  }
  if(inv){
    return React.DOM.ul({key:k, "className":"invisible"}, l);
  }else{
    return React.DOM.ul({key:k}, l);
  }
};
var cl = React.createClass({
    getInitialState: function() {
      return {class1: true};
    },
    render:function(){
        var obj = parent(this.props.storage, this);
        return obj;
    }
});