ReactJSは、私はちょうど状態がリストにどのように機能するかを学習する例を作成しようとしている

Question

http://jsfiddle.net/adamchenwei/3rt0930z/20/

を作成しました。

私が行うことは、リスト内で繰り返された特定の値を、リスト内のすべてのアイテムで状態を使って変更できるようにすることです。たとえば、この場合、onClickのchangeNameを実行すると、すべてのリスト項目の名前を 'lalala'に変更したいとします。

私はこの警告（フィドルバージョン11での問題、バージョン15で決議）

に上記の目的を達成するために、それを解決する上の任意の助けを持っているが？

実際のコード

var items = [ 
    { name: 'Believe In Allah', link: 'https://www.quran.com' }, 
    { name: 'Prayer', link: 'https://www.quran.com' }, 
    { name: 'Zakat', link: 'https://www.quran.com' }, 
    { name: 'Fasting', link: 'https://www.quran.com' }, 
    { name: 'Hajj', link: 'https://www.quran.com' }, 
]; 

var ItemModule = React.createClass({ 
    getInitialState: function() { 
     return { newName: this.props.name } 
    }, 
    changeName() { 
    console.log('changed name'); 
    this.setState({ newName: 'lalala' }); 
    }, 
    render() { 
    //<!-- <a className='button' href={this.props.link}>{this.props.name}</a> --> 
    return (
     <li onClick={this.changeName}> 

     {this.state.newName} 
     </li> 
    ); 
    } 
}); 

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

     var listItems = this.props.items.map(function(item) { 
      return (
       <div> 
      <ItemModule 
      key={item.name} 
      name={item.name} /> 
     </div> 
      ); 
     }); 

     return (
      <div className='pure-menu'> 
       <h3>Islam Pillars</h3> 
       <ul> 
        {listItems} 
       </ul> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<RepeatModule items={items} />,     
    document.getElementById('react-content')); 

-UPDATE- フィドルバージョン16

更新FIDLE、今キーで問題があり、また、onClickのは、すべてのリスト項目の値を更新しませんでした。私は何か悪いことはありますか？

-UPDATE- フィドルバージョン20

は今、唯一の問題は、私はあなたがそれはあなたがchangeName関数を呼び出している持っているようにonClick={this.changeName}

を行うためのものだと思いchange all the list item's name to 'lalala' when I run changeName of onClick.

Answer 1

ので

onClick={this.changeName}

あなたがのonClick関数を呼び出すしたいのですが、あなたは、私が思う

Answer 2

ですクリック時ではなくレンダリング時に表示されます。