0

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

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>
4

2 回答 2

0

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

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

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

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

而已！它解决了问题！

于 2018-11-27T19:06:19.197 回答
0

在 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>
于 2018-11-27T10:00:53.800 回答