ReactJS 无法引用创建的状态

Question

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

我只是想创建一个示例来了解状态在列表中的工作原理。

我打算做的是允许在列表中重复的特定值通过使用状态更改列表中的所有项目。例如，在这种情况下，当我运行 changeName onClick.

时，我想将所有列表项的名称更改为 'lalala'

但是我有这个警告（问题在 fiddle 版本 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'));

-更新- fiddle 版本 16

更新了文件，现在键有问题，而且，onClick 没有更新所有列表项的值。我做错了什么吗？

-更新- fiddle 版本 20

现在唯一的问题是 change all the list item's name to 'lalala' when I run changeName of onClick.

Answer 1

我想你是故意的onClick={this.changeName}

按照您的方式，您是在渲染时而不是在点击时调用 changeName 函数。

Answer 2

从

中删除括号

onClick={this.changeName()},

所以

onClick={this.changeName}

您想调用 onClick 函数，但您在渲染时以这种方式调用它

ReactJS 无法引用创建的状态

ReactJS not able to reference state created

javascript

reactjs

react-jsx