Reactjs 有没有办法处理单击项并设置父状态？

我想做一个简单的列表点击器。当用户单击列表项时，其父应用程序组件将创建或更新状态。应用程序内状态我希望有item.title和点击次数。但是我堆叠，我不知道如何制作这个handleClick方法。 这是我的密码：

  var data = ['list-A','list-B','list-C'];

  var App = React.createClass({
    getInitialState: function() {
      return {items: []}    
    },

    handleClick: function(i,item){
      //after click on item set items state {item.title : numberOfClicks}
      console.log('You click on ' + item);
    },

     render: function(){
       var listItems = this.props.data.map(function(item,i){
         return <ListItem id={i} title={item} onClick={this.handleClick.bind(this,i,item)}/>
       }.bind(this));
       return (
         <div>
           <h2>List Items: </h2>
           <ul>
            {listItems}   
           </ul>
         </div>
       )
     }

  });

  var ListItem = React.createClass({
    render: function(){
      return <li onClick={this.props.onClick} key={this.props.id} >{this.props.title}</li>
    }
  });


  React.render(
    <App data = {data}/>,
    document.getElementById('App')
  );

var数据=['list-A'、'list-B'、'list-C']；
var App=React.createClass({
getInitialState:函数（）{
返回{items:[]}
},
handleClick：功能（i，项）{
//单击项目后，设置项目状态{item.title:numberOfClicks}
console.log（'您单击'+项]）；
},
render:function（）{
var listItems=this.props.data.map（函数（项，i）{
返回
}.约束（这个）；
返回(
清单项目：

{listItems}

)
}
});
var ListItem=React.createClass({
render:function（）{
return
{this.props.title}
}
});
反应(
,
document.getElementById（'App'）
);

一个明确的方法是按照

li

定义函数，如下所示：

App = React.createClass({
  handleClick: function(value){
    this.setState({ selectedTitle: value });
    console.log('You click on ' + item);
  },

  render: function(){
    var listItems = this.props.data.map(function(item,i){
      return <ListItem id={i} title={item} onClick={this.handleClick}/>
  }
  ...
}

var ListItem = React.createClass({
  render: function(){
    return <li onClick={() => this.props.onClick(this.props.title)} key={this.props.id} >{this.props.title}</li>
  }
});

App=React.createClass({
handleClick:函数（值）{
this.setState（{selectedTitle:value}）；
console.log（'您单击'+项]）；
},
render:function（）{
var listItems=this.props.data.map（函数（项，i）{
返回
}
...
}
var ListItem=React.createClass({
render:function（）{
return
this.props.onClick（this.props.title）}key={this.props.id}>{this.props.title}
}
});

一个明确的方法是按照

li

定义函数，如下所示：

App = React.createClass({
  handleClick: function(value){
    this.setState({ selectedTitle: value });
    console.log('You click on ' + item);
  },

  render: function(){
    var listItems = this.props.data.map(function(item,i){
      return <ListItem id={i} title={item} onClick={this.handleClick}/>
  }
  ...
}

var ListItem = React.createClass({
  render: function(){
    return <li onClick={() => this.props.onClick(this.props.title)} key={this.props.id} >{this.props.title}</li>
  }
});

App=React.createClass({
handleClick:函数（值）{
this.setState（{selectedTitle:value}）；
console.log（'您单击'+项]）；
},
render:function（）{
var listItems=this.props.data.map（函数（项，i）{
返回
}
...
}
var ListItem=React.createClass({
render:function（）{
return
this.props.onClick（this.props.title）}key={this.props.id}>{this.props.title}
}
});

从道具中更新状态，并且每当发生更改时，使用更改的项目创建一个新数组，并将其设置为状态（）：

var数据=[
{title:'list-A'，单击：0}，
{title:'list-B'，单击：0}，
{title:'list-C'，单击：0}
];
var App=React.createClass({
/**第一次更新状态**/
componentWillMount:function（）{
这是我的国家({
项目：this.props.data | |[]
});
},
/**如果道具更改，则更新状态**/
组件将接收道具：函数（下一步）{
这是我的国家({
项目：nextrops.data
});
},
handleClick：功能（i，项）{
log（'单击'+i'）；
var items=this.state.items；
var currentItem=this.state.items.slice（i，i+1）[0]；
currentItem.clicks=currentItem.clicks+1；
//使用更新的项创建新状态
这是我的国家({
items:items.slice（0，i）
.concat（[currentItem]）
.concat（项目.切片（i+1））
});
},
render:function（）{
var listItems=this.state.items.map（函数（项，i）{
返回
}.约束（这个）；
返回(
清单项目：

{listItems}

)
}
});
var ListItem=React.createClass({
render:function（）{
return
{this.props.title}-{this.props.clicks}
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

从道具中更新状态，并且每当发生更改时，使用更改的项目创建一个新数组，并将其设置为状态（）：

var数据=[
{title:'list-A'，单击：0}，
{title:'list-B'，单击：0}，
{title:'list-C'，单击：0}
];
var App=React.createClass({
/**第一次更新状态**/
componentWillMount:function（）{
这是我的国家({
项目：this.props.data | |[]
});
},
/**如果道具更改，则更新状态**/
组件将接收道具：函数（下一步）{
这是我的国家({
项目：nextrops.data
});
},
handleClick：功能（i，项）{
log（'单击'+i'）；
var items=this.state.items；
var currentItem=this.state.items.slice（i，i+1）[0]；
currentItem.clicks=currentItem.clicks+1；
//使用更新的项创建新状态
这是我的国家({
items:items.slice（0，i）
.concat（[currentItem]）
.concat（项目.切片（i+1））
});
},
render:function（）{
var listItems=this.state.items.map（函数（项，i）{
返回
}.约束（这个）；
返回(
清单项目：

{listItems}

)
}
});
var ListItem=React.createClass({
render:function（）{
return
{this.props.title}-{this.props.clicks}
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);