ReactJS - 点击事件附加在元素列表中触发“点击”列表中的所有元素

Question

Im有一组元素在ul元素下（如下图所示），当我点击任何li元素时我想它附加一个类名称。然而，当我点击li元素上的任何元素时，所有li元素的click事件被触发，并且类被附加到所有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; 
    } 
}); 

Answer 1

使用onClick={this.functionName}

，而不是onclick={this.functionName()}