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版

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

Answer 1

从

中删除括号

onClick={this.changeName()}，

所以

onClick={this.changeName}

你想调用函数onClick，但是你在渲染时调用它

Answer 2

我认为你打算做onClick={this.changeName}

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

ReactJS无法引用创建的状态

2 个答案: