Question

我有一个父组件，该组件具有一个模式对话框作为子组件，在父组件内部有一个函数可以关闭对话框。

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>

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

Answer 2

我发现了这一点，我使用了Office Fabric UI Panel，在他们提到的文档中，我必须添加如下方法：

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

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

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

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

从子级调用父级组件的函数

2 个答案: