React - 单击时将按钮 HTML 更改为加载程序

Question

我有一个 Alerts 组件，它负责从提供给它的 props 的 JSON 中呈现警报：

alert.js（为简洁起见）

  createAlert(alerts) {
    return alerts.map(content => (
      <Col key={content.ID} s={12}>
        <div className="chip">
          <Icon className="alert">error_outline</Icon>
          <p>{content.Comment}</p>
          <span onClick={() => this.props.onRead(content.ID)}>
            <Icon className="closeAlert">close</Icon>
          </span>
        </div>
      </Col>
    ));
  }
  render() {
    let content = {};
    if (!this.props.content) {
      //Alerts are null so they are still loading.. show loader
      content = this.createLoader();
    } else if (!this.props.content.success){
      //Error getting alerts
      content = this.createAlertError(this.props.content.error);
    }
    else if (this.props.content.alerts.length === 0) {
      //Alert array is null, therefor no alerts
      content = this.createNoAlerts();
    } else {
      //Render Alerts
      content = this.createAlert(this.props.content.alerts);
    }
    return <div>{content}</div>;
  }
}

在上面的代码片段中，你可以看到如果

this.props.alerts 

是一个有元素的数组，那么它将运行

createAlert() 

这将创建一个 React 组件数组（在这种情况下，它只是 React-Materialize 组件，它只是一个 <div></div>）

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

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

这会从父组件运行一个事件。 在parent中运行的方法如下：

alertRead(id) {
  this.props.deleteAlert(id);
}

我想要的是在单击时将旋转加载器图标添加到按钮中的某种方式，在 jQuery 中它将是：

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

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

Answer 1

没有 Redux 版本

我在代码中没有看到任何 redux 关系，所以我假设您没有在此特定流程中使用它或没有使用它。

你需要做的是向 Alert 组件添加状态并在 onClick 处理程序中做两件事：

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

当然，您需要使用clicked: false 进行状态初始化。第二件事是在渲染中使用这个状态：

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

因此，当单击显示加载程序时，未单击显示按钮。以上代码示例仅用于向您展示正确的路径。

---

版本假设 Redux 使用。

如果您使用的是 redux，则 alert 需要与 store 建立连接，例如：

connect((state) => ({ isClicked: getIsButtonClicked(state)}), { dispatchClick })(AlertComponent)

并且您需要在点击后调度点击操作（它将设置负责该操作的商店状态 - clicked 为真。

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

最后你还需要在渲染中使用这个道具：

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

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