reactjs - 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（默认为 true）。将您的按钮更改为：

{ 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
    }));
}