是否有辦法處理點擊項目並設置父狀態？

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