Question

我是React的新手，并且试图将父母的功能分配给动态创建的孩子

class Row extends React.Component {

handleStateChange() {
    console.log(this); //just for test
}

render() {
    let notes = [],
        categoryId = this.props.rowNo;

    bonuses.forEach(function (bonus, i) {
        let id = 'cell_' + categoryId.toString() + (i + 1).toString();
        notes.push(<NoteCell bonus={bonus}
                             songName={id + '.mp3'}
                             id={id}
                             key={id}
                                        // that is the point
                             handleRowStateChange={this.handleStateChange}
        />);
    });

    return (
        <div className="row clearfix">
            {notes}
        </div>
    )
}

我收到Cannot read property 'handleStateChange' of undefined错误。我做错了什么？

Answer 1

回调函数内部this的范围是指调用对象，而不是反应类。所以使用()=>代替function。

handleStateChange() {
    console.log(this); //just for test
    this.setState({parentState:value})
}

bonuses.forEach((bonus, i) =>{
    let id = 'cell_' + categoryId.toString() + (i + 1).toString();
    notes.push(<NoteCell bonus={bonus}
                         songName={id + '.mp3'}
                         id={id}
                         key={id}
                                    // that is the point
                         handleRowStateChange={this.handleStateChange.bind(this)}
    />);
});

Answer 2

您的this正在引用组件类中的bonuses.forEach(function函数而不是this。 arrow function应该消除这个问题。

bonuses.forEach((bonus, i) => {

顺便说一句，如果你没有使用ES6，那么你可以通过在函数顶部获取this的副本然后在你的函数中使用它来实现这一目的：

render() {
    let notes = [],
        categoryId = this.props.rowNo
        self = this;
        ...

        handleRowStateChange={self.handleStateChange}

但你还有另一个问题。当你进入handleStateChange函数时，它也将拥有自己的this。您可以使用构造函数解决这个问题：

class Row extends React.Component {

  constructor (props) {
    super(props);

    this.handleStateChange = this.handleStateChange.bind(this);

  }
...

ReactJS动态函数赋值

2 个答案: