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

时间:2015-11-16 11:39:52

标签: javascript reactjs

我在ul元素下有一组li元素(如下所示),当我点击任何li元素时,我希望它为它附加一个类名。但是,当我单击任何on 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;
    }
});

1 个答案:

答案 0 :(得分:0)

使用@model FilterBusinessStructureViewModel <div class="form-group"> <label for="" class="col-sm-12 control-label">Choose Divisions/BUs/Sites</label> <div class="col-sm-12"> @(Html.Kendo().TreeView() .Name("tvBusinessStructure") .DataTextField("Name") .Checkboxes(checkedboxes => checkedboxes .Name("SelectedDivision") .CheckChildren(true) ) .DataSource(dataSource => dataSource .Model(m => m .Id("Id") .HasChildren("hasChildren") .Children("Children")) .Read(read => read .Action("BusinessStructure", "Report") ) ) ) </div>

而不是onClick={this.functionName}