在reactjs中禁用按钮

Question

我有一系列执行内部逻辑的按钮（没有不依赖于输入的表单），但异步调用函数。我想在单击后禁用该按钮，并在 onclick() 方法上尝试了几种方法，但不断出现错误。

代码看起来像这样：

{ this.state.isEthTransferVisible && <button id="button"
                  onClick={() => { parseAddress(this.state.sc);}, this.handleTransferFromEthereum}>Check Balances</button>
}

这是从 onclick

中调用的函数

async handleTransferFromEthereum(){
  await parseAddress(this.state.sc)
    this.setState(prevState => ({
         isEthTransferVisible: !prevState.isEthTransferVisible,
         isGoDeployedVisible: !prevState.isGoDeployedVisible
    }));
}

Answer 1

onClick={() => { parseAddress(this.state.sc);}, this.handleTransferFromEthereum}

语法错误？应该是：

onClick={() => { 
  parseAddress(this.state.sc);
  this.handleTransferFromEthereum();
}}

Answer 2

添加另一个状态变量，例如this.isEthTransferEnabled（默认为真）。将您的按钮更改为：

{ this.state.isEthTransferVisible && <button id="button"
                  disabled={this.state.isEthTransferEnabled}
                  onClick={() => { parseAddress(this.state.sc);}, this.handleTransferFromEthereum}>Check Balances</button>
}

并更改您的 handleTransferFromEthereum 方法：

async handleTransferFromEthereum(){
  this.setState({ isEthTransferEnabled: false });
  await parseAddress(this.state.sc)
    this.setState(prevState => ({
         isEthTransferVisible: !prevState.isEthTransferVisible,
         isEthTransferEnabled: true,
         isGoDeployedVisible: !prevState.isGoDeployedVisible
    }));
}

在reactjs中禁用按钮

disable button in reactjs

button

reactjs

disable