Question

我正在尝试实现一种非常简单的方法，即在消息之间显示负载。 A live example here

^(.*?)(\shas)?\sinflicted$

我想做的是以下示例：

确定吗？
正在加载...
成功！

但是我没有正确地执行此操作，因为我与三元运算符无法正常工作。我该如何改善呢？

谢谢！：）

Answer 1

在此处修复：https://codesandbox.io/s/rln4oz4vwq

基本思想：默认情况下，将加载设置为false，因为您没有加载任何东西。单击按钮时，将加载设置为true。然后，在完成异步操作后，将loading设置为false，并将commitSuccess设置为true，以表明您已完成。

代码：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      submitSuccess: false
    };
  }

  onClick = () => {
    console.log("click");
    this.setState({
      isLoading: true
    });

    //lets assume you now do some async stuff and after 2 seconds you are done
    setTimeout(() => {
      this.setState({
        isLoading: false,
        submitSuccess: true
      });
    }, 2000);
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.onClick}>click</button>
        {this.state.isLoading ? (
          <p>loading...</p>
        ) : this.state.submitSuccess ? (
          <p>success!</p>
        ) : (
          <p>are you sure?</p>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

成功消息之前的简单加载

1 个答案: