我无法停止在 AwesomeButton React 中加载进度

Question

我想停止这个进程，我在我的代码中添加了一个加载状态，但是当我点击按钮并且交易成功时，加载进程并没有停止。

很棒的按钮演示网页：https://caferati.me/demo/react-awesome-button

onSubmitAdd = async (event) => {
    event.preventDefault();
    this.setState({ loading: true });
    try {
      const { accounts, contract, addAmount, web3 } = this.state;
      await contract.methods.addMoney().send({
        from: accounts[0],
        value: web3.utils.toWei(addAmount, "ether"),
      });
    } catch (err) {
      this.setState({ errorMessage: err.message });
    }
    this.setState({ loading: false, addAmount: "" });
  };

这是我的渲染代码：

<form onSubmit={this.onSubmitAdd}>
                  <div class="spaceTop"></div>
                  <div>
                    <input
                      placeholder="Value of ETH"
                      type="number"
                      id="id1"
                      value={this.state.addAmount}
                      onChange={(event) =>
                        this.setState({ addAmount: event.target.value })
                      }
                      style={{
                        backgroundColor: "#6d6d6d",
                        color: "#fcfcfc",
                        borderRadius: "100px",
                        height: "60px",
                        width: "300px",
                        paddingLeft: "2em",
                        marginBottom: "10px",
                      }}
                    />
                  </div>
                  <AwesomeButtonProgress
                    action={this.state.loading}
                    type="primary"
                  >
                    Add Money
                  </AwesomeButtonProgress>
                </form>

Answer 1

根据 AwesomeButtonProgress 文档，要停止进度，您需要在一些异步处理后在操作回调函数中调用 next()。

<AwesomeButtonProgress
        action={(element, next) => {
            console.log('clicked');
            setTimeout(() => {
                next();
            }, 600);
        }}
        type="primary"
    >
        Add Money
    </AwesomeButtonProgress>;

根据您分享的代码片段，您只是将 true/false 传递给 action

你也可以参考这个working example they have as part of the docs

我无法停止在 AwesomeButton React 中加载进度

I can't stop loading progress in AwesomeButton React

reactjs

blockchain

smartcontracts