Question

我正在学习做出反应，我试图在sweetAlert2-react弹出窗口之后更改按钮文本。按钮上的原始文本为“ ACTIVE”，如果我在弹出窗口上选择“确定”，则必须“激活”按钮上的文本，如果是，则选择“取消”。.

我不知道如何或在哪里进行IF迭代有帮助吗？

这是我的代码：

<button onClick={() => this.setState({ show: true })}>ACTIVE</button> <SweetAlert show={this.state.show} showCancelButton={this.state.show} title="Are you shore?" onConfirm={() => this.setState({ show: false })} />

谢谢！

Answer 1

有条件地在按钮内部设置字符串。

<button>
    {this.state.active === 'active' && <div>ok</div>}
    {this.state.active === 'disabled' && <div>idk</div>}
<button>

如果只有两个状态，请考虑三元运算符。

<button>
    {this.state.active === 'active' ? <div>ok</div> : <div>idk</div>}
<button>

Answer 2

您可以将按钮的文本保存为状态（例如：this.state.buttonText），然后当用户单击buttonText / {{1时，就可以设置OK }}按钮。

您可以使用通用方法（在下面的示例Cancel中）管理两个事件（确定和取消），并在其中设置按钮的文本。

请参见以下示例（click here to run）：

hideAlert

我希望它能帮助您，再见。

在弹出式窗口React和sweetalert2-react之后更改按钮文本

2 个答案: