Reactjs 反应-单击后将按钮HTML更改为加载程序

我有一个警报组件，负责将JSON提供的警报呈现给道具：

alert.js（为简洁起见，请删节）

是一个包含元素的数组，则它将运行

createAlert() 

它将创建一个React组件数组（在本例中，它的just-React-Materialize组件只是一个

）

我感兴趣的部分是onClick事件的跨度

<span onClick={() => this.props.onRead(content.ID)}>
  <Icon className="closeAlert">close</Icon>
</span>

我想要的是，在点击按钮上添加一个旋转加载程序图标，在jQuery中是：

$(button).on("click", function(){
  this.html("<i class='fa fa-spin fa-spinner'></i>");  //Spinner Icon
});

$（按钮）。在（“单击”，函数（）上）{
this.html（“”；//微调器图标
});

---

问题是，如何编辑单击的按钮的HTML？

无重复版本

我在代码中没有看到任何redux关系，因此我将假设您没有在这个特定流中使用它或没有使用它

您需要做的是向警报组件添加状态，并在onClick处理程序中执行两件事：

() => { this.props.onRead(content.ID); this.setState({clicked: true});}

当然，您需要通过单击

进行状态初始化：false

。第二件事是在渲染中使用此状态：

{this.state.clicked && <Loader />}
{!this.state.clicked && <YourButton />}

{this.props.isClicked && <Loader />}
{!this.props.isClicked && <YourButton />}

并且您需要在单击之后分派单击操作（它将设置负责该操作的商店状态-

clicked

on true）

() => { this.props.onRead(content.ID); this.props.dispatchClick();}

最后，您还需要在渲染中使用此道具：

{this.state.clicked && <Loader />}
{!this.state.clicked && <YourButton />}

{this.props.isClicked && <Loader />}
{!this.props.isClicked && <YourButton />}

{this.props.isClicked&&}
{！this.props.isClicked&}

---

此解决方案将涵盖警报组件的所有实例。我在这里不介绍redux部分。

请编辑您的问题，使其更清楚一点：大代码片段后的第一句话不完整。如果您稍微清楚一点，也许我可以帮您：）我正在使用redux，只是在相关的情况下对其进行标记。但是对于这个特定的组件，我使用的是道具和组件状态。即使您使用redux，如果这是状态完整的组件，也可以使用这种方法。当然，最好的办法是把这个组件连接到商店，用按钮或加载器做相同的逻辑，但是在商店的道具上。我确实考虑了使用状态，但问题是我有一个动态生成的div数组。页面上最多可能有10个警报。单击其中一个警报时，所有警报都需要有微调器？是的，这是正确的。但我认为你的第一个评论是对的，我需要将它连接到商店，而不是这种方法

() => { this.props.onRead(content.ID); this.props.dispatchClick();}

{this.props.isClicked && <Loader />}
{!this.props.isClicked && <YourButton />}