當單擊項目時如何更改reactJS中列表中項目的所有值

Question

http://jsfiddle.net/adamchenwei/3rt0930z/23/我嘗試從此處應用解決方案react.js從子級調用父函數

但是我遇到問題： 3VM606:43Uncaught TypeError: Cannot read property 'changeName' of undefined

任何人都知道為什么會發生這種情況以及如何解決它，以便onClick會更改每個項目的名稱，而不僅僅是單擊的名稱？

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 }
    },
    changeItsName() {
    this.props.changeTheName();
  },
    render() {
    //<!-- <a className='button' href={this.props.link}>{this.props.name}</a> -->
    return (
        <li onClick={this.changeItsName}>

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

var RepeatModule = React.createClass({
    getInitialState: function() {
        return { items: [] }
    },
  changeName() {
    console.log('changed name');
    this.setState({ newName: 'Test' });
  },
    render: function() {

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

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

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

謝謝！

Answer 1

您有一個范圍問題，在map函數中， this是引用map函數而不是您的react對象。 如果使用的是Transpiler，請使用es6箭頭語法，或者執行以下操作

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

ES6的實現方式是：

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

也不需要執行this.changeName.bind(this) ，當您在組件prop中進行綁定時，它實際上會使反應性能降低。 參見： https : //daveceddia.com/avoid-bind-when-passing-props/https : //daveceddia.com/avoid-bind-when-passing-props/

Answer 2

你的意思是這個-> http://codepen.io/dagman/pen/JRbyLj

const 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'
}, ];

const ItemModule = ({
    name,
    changeName
}) => (
    <li onClick={changeName}>
        {name}
  </li>
);

const RepeatModule = React.createClass({
    getInitialState: function() {
        return {
            newName: ''
        }
    },
    changeName() {
        console.log('changed name');
        this.setState({
            newName: 'Test'
        });
    },
    render() {
        const listItems = this.props.items.map((item) => {
            return (
                <ItemModule
                  name={this.state.newName || item.name}
                  changeName={this.changeName.bind(this)}
                />
      );
        });

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

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