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处理程序-“单击时，调用此函数，但直到那时为止。”

将函数作为参数传递，这将是onClick事件

1 个答案: