Javascript ReactJS-元素列表上附加的单击事件正在触发；点击"；对于列表中的所有元素

我在ul元素下有一组li元素（如下所示），当我单击任何li元素时，我希望它附加一个类名。但是，当我单击任何li元素时，会触发所有li元素的“单击事件”，并且类会附加到所有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;
    }
});

var k=0；
变量子项=函数（d，clO）{
var newClassName=“class1”；
如果（clO.state.class1）{
var variableClassName=newClassName；
}否则{
var variableClassName=“”；
}
变量切换=功能（e）{
e、 停止传播（）；
e、 预防默认值（）；
clO.setState（{class1:！clO.state.class1}）；
如果（clO.state.class1）{
variableClassName=newClassName；
}否则{
variableClassName=“”；
}
};
var span=React.DOM.span（{“className”：variableClassName，key:“s”+d.s，onClick:toggle}，null）；
返回[span]；
};
var父项=功能（d、clO、inv）{
k=k+1；
var l=[]；
对于（var i=0；i使用
onClick={this.functionName}

而不是
onclick={this.functionName（）}