ReactJS nicht in der Lage Zustand zu verweisen erstellt

Question

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

ich nur versucht, ein Beispiel zu erstellen, um zu lernen, wie Zustand in einer Liste funktioniert.

Was ich tun möchte, ist es, einen bestimmten Wert, der in einer Liste wiederholt wurde, in ALLEN Elementen in der Liste zu ändern, indem Sie state verwenden. In diesem Fall möchte ich beispielsweise den Namen des Listenelements in 'lalala' ändern, wenn ich changeName onClick starte.

Allerdings habe ich diese Warnung (Ausgabe an Geige Version 11 auf Version behoben 15)

Jede Hilfe zu lösen es Zweck oben zu erreichen?

tatsächlicher Code

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- Geige Version 16

aktualisiert FIDLE, jetzt ist es Problem mit Schlüsseln, auch der onClick nicht den Wert für alle Listenelemente aktualisieren . Ist etwas falsch, was ich getan habe?

-UPDATE- Geige Version 20

Nun ist die einzige Frage ist change all the list item's name to 'lalala' when I run changeName of onClick.

Answer 1

entfernen Sie die Klammer aus

onClick={this.changeName()},

so

onClick={this.changeName}

möchten Sie die Funktion onClick nennen, aber Sie nennen es machen auf diese Weise

Answer 2

Ich glaube, Sie onClick={this.changeName}

In der Art und Weise Sie es zu tun haben, soll Sie fordern die changeName Funktion auf Render statt auf Klick.