Question

我有一个警报组件，负责从提供给它的道具的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>;
  }
}

在上面的snippit中，你可以看到if

this.props.alerts

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

createAlert()

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

我感兴趣的部分是onClick事件的范围

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

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

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 />}

所以点击show loader时没有点击显示按钮。上面的代码示例仅用于向您展示正确的路径。

假设使用Redux的版本。

如果您使用的是redux，那么alert需要与商店建立连接，如：

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

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

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

同样，你需要在渲染中使用这个道具：

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

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

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

1 个答案: