javascript - ReactJs:防止多次按下按钮

Question

在我的 React 组件中，我有一个按钮，用于在单击时通过 AJAX 发送一些数据。我只需要第一次发生，即在第一次使用后禁用按钮。

我是如何尝试做到这一点的:

var UploadArea = React.createClass({

  getInitialState() {
    return {
      showUploadButton: true
    };
  },

  disableUploadButton(callback) {
    this.setState({ showUploadButton: false }, callback);
  },

  // This was simpler before I started trying everything I could think of
  onClickUploadFile() {
    if (!this.state.showUploadButton) {
      return;
    }
    this.disableUploadButton(function() {
      $.ajax({
        [...]
      });

    });
  },

  render() {
    var uploadButton;
    if (this.state.showUploadButton) {
      uploadButton = (
        <button onClick={this.onClickUploadFile}>Send</button>
      );
    }

    return (
      <div>
        {uploadButton}
      </div>
    );
  }

});

我认为发生的情况是状态变量 showUploadButton 没有立即更新，React 文档说这是预期的。

我如何强制按钮在被点击时被禁用或完全消失？

Answer 1

解决方案是在进入处理程序后立即检查状态。 React 保证交互事件(例如点击)中的 setState 在浏览器事件边界被刷新。引用:https://github.com/facebook/react/issues/11171#issuecomment-357945371

// In constructor
this.state = {
    disabled : false
};


// Handler for on click
handleClick = (event) => {
    if (this.state.disabled) {
        return;
    }
    this.setState({disabled: true});
    // Send     
}

// In render
<button onClick={this.handleClick} disabled={this.state.disabled} ...>
    {this.state.disabled ? 'Sending...' : 'Send'}
<button>