Есть ли способ handleClick on item и установить родительское состояние?

Question

Я хочу сделать простой кликер. когда пользователь нажимает на элемент списка, его родительский компонент приложения создает или обновляет состояние. В состоянии приложения я хочу иметь 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') 
); 

Answer 1

Обновление состояния из реквизита, и всякий раз, когда что-то меняется, создать новый массив, с изменен пункт и установить его в состояние (fiddle):

var data = [ 
    { title: 'list-A', clicks: 0 }, 
    { title: 'list-B', clicks: 0 }, 
    { title: 'list-C', clicks: 0 } 
    ]; 

    var App = React.createClass({ 
    /** update state for the 1st time **/ 
    componentWillMount: function() { 
     this.setState({ 
     items: this.props.data || [] 
     }); 
    }, 

     /** update state if the props changes **/ 
    componentWillReceiveProps: function(nextProps) { 
     this.setState({ 
     items: nextProps.data 
     }); 
    }, 

    handleClick: function(i,item){ 
     console.log('You click on ' + i); 

     var items = this.state.items; 

     var currentItem = this.state.items.slice(i, i + 1)[0]; 

     currentItem.clicks = currentItem.clicks + 1; 

     // create a new state with the updated item 
     this.setState({ 
     items: items.slice(0, i) 
      .concat([currentItem]) 
      .concat(items.slice(i + 1)) 
     }); 
    }, 

    render: function(){ 
     var listItems = this.state.items.map(function(item,i){ 
     return <ListItem id={i} key={ i } title={item.title} clicks={item.clicks} 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} - {this.props.clicks}</li> 
    } 
    }); 

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

Answer 2

Очевидным способом является определение функции в 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> 
    } 
});