React实现点击按钮切换为加载图标功能问询

在React里实现这个需求，核心思路是用状态（state）来控制UI的变化，而不是像jQuery那样直接操作DOM——毕竟React是数据驱动的，UI会跟着状态自动更新。下面是具体的实现步骤：

1. 给Alerts组件添加加载状态管理 #

首先在组件的构造函数里初始化一个状态，用来记录哪些告警正在处理中：

constructor(props) {
  super(props);
  this.state = {
    // 用对象存储每个告警ID的加载状态：key是alert ID，value是布尔值
    loadingAlerts: {}
  };
  // 绑定自定义处理函数（类组件需要这一步）
  this.handleAlertRead = this.handleAlertRead.bind(this);
}

2. 重写点击事件处理逻辑 #

替换原来直接调用this.props.onRead的写法，先更新状态标记当前告警为加载中，再调用父组件的方法，等异步操作完成后取消加载状态：

handleAlertRead(alertId) {
  // 第一步：标记当前告警为加载中
  this.setState(prevState => ({
    loadingAlerts: {
      ...prevState.loadingAlerts,
      [alertId]: true
    }
  }));

  // 第二步：调用父组件的onRead方法（注意：这里假设父组件的方法返回Promise，比如API请求）
  this.props.onRead(alertId)
    .finally(() => {
      // 第三步：不管操作成功/失败，都取消加载状态
      this.setState(prevState => ({
        loadingAlerts: {
          ...prevState.loadingAlerts,
          [alertId]: false
        }
      }));
    });
}

小提示：如果父组件的alertRead方法没有返回Promise，你需要修改父组件逻辑，让它返回Promise。比如父组件的方法可以改成：

alertRead(id) {
  // 假设deleteAlert是返回Promise的API请求
  return this.props.deleteAlert(id);
}

3. 根据状态渲染对应图标 #

在createAlert函数里，根据当前告警ID的加载状态，决定显示关闭图标还是旋转加载图标：

createAlert(alerts) {
  return alerts.map(content => {
    const isLoading = this.state.loadingAlerts[content.ID] || false;
    return (
      <Col key={content.ID} s={12}>
        <div className="chip">
          <Icon className="alert">error_outline</Icon>
          <p>{content.Comment}</p>
          <span onClick={() => this.handleAlertRead(content.ID)}>
            {/* 根据加载状态切换图标 */}
            {isLoading ? (
              <Icon className="closeAlert spin">refresh</Icon>
              {/* 这里用refresh图标+spin类实现旋转，你可以换成自己需要的加载图标 */}
            ) : (
              <Icon className="closeAlert">close</Icon>
            )}
          </span>
        </div>
      </Col>
    );
  });
}

4. 添加旋转动画样式 #

如果你的Icon组件本身没有自带旋转类，需要手动加一段CSS：

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

这样处理后，用户点击关闭按钮时，按钮会立刻切换成旋转的加载图标，等父组件的删除操作完成后，再恢复成关闭图标（如果告警项被成功移除，就不会再显示了）。

内容的提问来源于stack exchange，提问作者Michael