ReactJs: Evite presionar el botón varias veces

Solución:

La solución es verificar el estado inmediatamente después de ingresar al controlador. React garantiza que setState dentro de los eventos interactivos (como el clic) se vacíe en el límite del evento del navegador. Ref: 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>

Lo que podría hacer es desactivar el botón después de hacer clic y dejarlo en la página (no es un elemento en el que se puede hacer clic).

Para lograr esto, debe agregar una referencia al elemento del botón

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

y luego en la función onClickUploadFile deshabilite el botón

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

A continuación, puede diseñar el botón deshabilitado en consecuencia para dar algunos comentarios al usuario con

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

Si es necesario, asegúrese de volver a habilitarlo con

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

Actualizar: la forma preferida de manejar las referencias en React es con una función y no una cadena.

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


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

Actualizar: Usar ganchos de reacción

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>

aquí hay un pequeño ejemplo usando el código que proporcionó https://jsfiddle.net/69z2wepo/30824/

Probado como uno que funciona: http://codepen.io/zvona/pen/KVbVPQ

class UploadArea extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isButtonDisabled: false
    }
  }

  uploadFile() {
    // first set the isButtonDisabled to true
    this.setState({
      isButtonDisabled: true
    });
    // then do your thing
  }

  render() {
    return (
      <button
        type="submit"
        onClick={() => this.uploadFile()}
        disabled={this.state.isButtonDisabled}>
        Upload
      </button>
    )
  }
}

ReactDOM.render(<UploadArea />, document.body);

---

---

Utiliza Nuestro Buscador