2016-09-20 11 views
1

http://jsfiddle.net/adamchenwei/3rt0930z/20/ReactJSは、私はちょうど状態がリストにどのように機能するかを学習する例を作成しようとしている

を作成しました。

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

私はこの警告(フィドルバージョン11での問題、バージョン15で決議) enter image description here

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

実際のコード

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.

+1

そのようにレンダリングにそれを呼び出している、

onClick={this.changeName()}から

を括弧を削除あなたは 'onClick = {this.changeName}'を行うことを意味しました – Neal

答えて

4

ので

onClick={this.changeName}

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

+0

こんにちは@Davidlrntあなたは更新されたissuを知っていますかe? – Ezeewei

+0

あなたは一意の番号をキーに渡す必要があります。一般的な方法は現在の反復のインデックスを渡すことです – StackOverMySoul

+0

私のフィドルをudpatedしました。私はインデックスを追加した後も同じことが起こります。思想? – Ezeewei

2

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

関連する問題