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()}