Question

我有一个父组件，它将onSomeAction道具提供给子组件：

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();
    }
}

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

Answer 1

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

执行此操作

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

Example

Answer 2

关于如何获取已单击的元素或整个组件范围，您有两种选择。

选项一：而不是记录这个，你应该像这样记录事件目标：

    doSomething(e) {
        console.log(e.target);
    }

选项二：你必须将this关键字附加到doSomething方法，如下所示：

constructor(props) {
    super(props);
    this.doSomething = this.doSomething.bind(this);
}

您可以在自己的方法中访问关键字this。

选项3：

如果你想将这个引用到子组件，那么你必须在函数调用中绑定（this）子组件

Answer 3

实际上你可以通过3种方式解决它：

<ChildComponent onSomeAction={ this.doSomething.bind(this) } />
<ChildComponent onSomeAction={ () => this.doSomething() } />
<ChildComponent onSomeAction={this.doSomething} /> 并将其添加到构造函数：this.doSomething = this.doSomething.bind(this)

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

3 个答案: