ReactJs：防止多次按下按钮

  • Z时代
  • 2024-01-10
  • 分类：问答

在我的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文档所说的预期。

我如何强制按钮被禁用或在单击按钮时立即消失？

回答：

您可以做的是单击该按钮后将其禁用，然后将其保留在页面中（不可单击的元素）。

为此，您必须向按钮元素添加一个引用

<button ref="btn" onClick={this.onClickUploadFile}>Send</button>

然后在onClickUploadFile函数上禁用该按钮

this.refs.btn.setAttribute("disabled", "disabled");

然后，您可以相应地设置禁用按钮的样式，以向用户提供一些反馈

.btn:disabled{ /* styles go here */}

如果需要，请确保使用

this.refs.btn.removeAttribute("disabled");

在React中处理引用的首选方法是使用函数而不是字符串。

<button 
  ref={btn => { this.btn = btn; }} 
  onClick={this.onClickUploadFile}
>Send</button>
this.btn.setAttribute("disabled", "disabled");
this.btn.removeAttribute("disabled");

使用react挂钩

import {useRef} from 'react';
let btnRef = useRef();
const onBtnClick = e => {
  if(btnRef.current){
    btnRef.current.setAttribute("disabled", "disabled");
  }
}
<button ref={btnRef} onClick={onBtnClick}>Send</button>

这是一个使用您提供的代码的小示例

https://jsfiddle.net/69z2wepo/30824/

以上是 ReactJs：防止多次按下按钮 的全部内容， 来源链接： utcz.com/qa/423486.html

回到顶部