javascript - 将函数作为参数传递，这将是一个 onClick 事件

Question

我有一个返回 React.ReactElement 对象的函数。我想将该函数传递给分配给 onClick 按钮事件的函数。

我调用函数:

this._createInjurySection1Drawer([{innerDrawer: this._createInjurySection2Drawer, shouldShow:this._OnClickCloseInjurySection2}])

函数:

private _createInjurySection1Drawer(innerDrawers: any[]): React.ReactNode {

    ...

    let innerDrawer;
    let shouldShow;

    console.log("_createInjurySection1Drawer | innerDrawers: ", innerDrawers);

    if (innerDrawers && innerDrawers.length > 0) {
        innerDrawer = innerDrawers[0].innerDrawer;
        shouldShow = innerDrawers[0].shouldShow;
        innerDrawers.shift();
    }

    return (
        <Drawer
            ...
        >
            <div>
                {sectionOneForm.CreateSection(inputFieldsInjurySection1)}

                {innerDrawer && 
                    innerDrawer(innerDrawers)
                }
                <br/> <br/>
                <div>
                    <Button onClick={shouldShow()} type="primary">Next</Button>
                </div>
            </div>
        </Drawer>
    );
}

当我运行它时，我创建了一个无限循环。

单击按钮时如何传递一个函数来处理？

Answer 1

尝试

<Button onClick={shouldShow} type="primary">Next</Button>

进一步解释，

<Button onClick={shouldShow()} type="primary">Next</Button>

将实际调用 shouldShow 函数，因此返回值将用作 onClick 处理程序。如果 shouldShow 本身返回一个函数，这很好，但如果它返回例如一个字符串 - “hello world”() 是什么意思？

<Button onClick={shouldShow} type="primary">Next</Button>

而是将函数本身设置为 onClick 处理程序 - “当我被单击时，调用此函数，但直到那时才调用。”