从子组件调用时，父组件中的上下文丢失

Question

我有一个父组件，它将onSomeActionprop 提供给子组件：

export default class myComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
           <div className="mycomponent">
             <ChildComponent onSomeAction={this.doSomething} />
           </div>
        )
    }

    doSomething() {
        console.log(this);
    }
}

在子组件中，当单击某些内容时，我将调用一个方法，该方法依次调用该onSomeAction道具：

export default class ChildComponent extends Component {
    render() {
        return (
           <div className="">
             <a onClick={() => this.doIt()}>doIt</a>
           </div>
        )
    }

    doIt() {
        const { onSomeAction } = this.props;
        onSomeAction();
    }
}

我看到的问题是回到父组件中， this 上下文似乎已经丢失 -方法console.log中doSomething返回未定义。为什么是这样？我需要能够访问父组件上下文。

Answer 1

您需要在父组件中设置上下文，您可以使用.bind

<ChildComponent onSomeAction={ this.doSomething.bind(this) } />
                                               ^^^^^^^^^^^^   

Example