三个条件的onClick条件渲染

Question

我有onClick我想根据以下逻辑来执行某个功能：

onClick={
approve && this.handleApproveClick,
!approve && !releaseHold && this.handleDeclineClick,
releaseHold && this.handleReleaseHoldClick
}

奇怪的是，最后一个this.handleReleaseHoldClick可以工作，而其他的则不能。正确的方法是什么？还是我真的需要创建一个单独的按钮？

Answer 1

为什么只有最后一个作品？

这是一种基本的comma operator情况，其中“逗号运算符计算其每个操作数（从左到右）并返回最后一个操作数的值。”

执行此操作的正确方法是什么？

由于它是三重条件函数，因此建议您创建一个类方法并简单地保护每种可能的情况。

handleSomeClick = () => {
    if (approve) {
        this.handleApproveClick();
    } else if (!approve && !releaseHold) {
        this.handleDeclineClick();
    } else if (releaseHold) {
        this.handleReleaseHoldClick();
    }
}

和JSX内

onClick={this.handleSomeClick}