从子组件调用父组件的函数答案

【问题标题】：Call a function of parent component from child从子组件调用父组件的函数
【发布时间】：2018-11-27 06:58:56
【问题描述】：

我有一个父组件，它有一个模态对话框作为子组件，我在父组件中有一个关闭对话框的函数。

public _setShowTemplatePanel = (showTemplatePanel: boolean): (() => void) => {
    return (): void => {
        this.setState({ showTemplatePanel });
    };
}

在子组件中，我有保存表单的按钮，然后我想从父组件调用该函数。下面的代码运行良好：

<PrimaryButton onClick={this.props.setShowTemplatePanel(false)}>Save </PrimaryButton>

但是如果想从子组件内部的函数调用它不起作用，我需要在调用父函数之前执行一些操作。

public _onClosePanel = () => {
    this.props.setShowTemplatePanel(false);
}
<DefaultButton onClick={()=>this._onClosePanel}>save</DefaultButton>

【问题讨论】：

究竟是什么问题，一个错误？
你可以试试this._onClosePanel()而不是this._onClosePanel
似乎没有问题，当我单击按钮时，onClosePanel 会触发，但此行不起作用：this.props.setShowTemplatePanel(false);我也试过 this._onClosePanel()，但没有运气！
你在构造函数中绑定方法了吗？ this. _onClosePanel=this. _onClosePanel .bind(this);
哪个是父级，哪个是子级？从您的示例中并不清楚。

标签： reactjs

【解决方案1】：

在 JSX 中，括号之间的代码被执行，所以 onClick={this.props.setShowTemplatePanel(false)} 只会在渲染时调用 this.props.setShowTemplatePanel(false)。您需要将其指定为箭头函数或作为类的属性。在您的最后一段代码中，您实际上两者都做了，但只有一个是真正必要的，如下所示：

public _onClosePanel = () => {
    this.props.setShowTemplatePanel(false);
}
<DefaultButton onClick={this._onClosePanel}>save</DefaultButton>

或者这个

<DefaultButton onClick={()=>this.props.setShowTemplatePanel(false)}>save</DefaultButton>

【讨论】：

【解决方案2】：

我想通了，我使用了 Office Fabric UI 面板，在他们提到的文档中我必须添加这样的方法：

public _setShowPanel = (showPanel: boolean): (() => void) => {
    return (): void => {
        this.setState({ showPanel });
    };
}

所以你可以看到方法的类型是 (()=>void)，我只是在调用方法的末尾添加了 ()：

public _onClosePanel = () => {
    this.props.setShowTemplatePanel(false)();
}

就是这样！它解决了问题！

【讨论】：