javascript - instalar - react js tutorial

ReactJs: previene el botón de varias veces

Question

En mi componente React tengo un botón destinado a enviar algunos datos a través de AJAX cuando se hace clic. Necesito que suceda solo la primera vez, es decir, deshabilitar el botón después de su primer uso.

Cómo estoy tratando de hacer esto:

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

});

Lo que creo que sucede es que la variable de estado showUploadButton no se actualiza de inmediato, lo cual, según los documentos de React, se espera.

¿Cómo podría aplicar el botón para desactivarme o desaparecer en el instante en que se hace clic?

Answer 1

La solución es verificar el estado inmediatamente después de ingresar al controlador. React garantiza que setState dentro de eventos interactivos (como hacer clic) se vacía 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>

Answer 2

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

Para lograrlo tienes que añadir una referencia al elemento de botón.

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

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

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

A continuación, puede aplicar un estilo al botón deshabilitado para dar un comentario al usuario con

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

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

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

Actualización: la forma preferida de manejar refs 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");

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

Answer 3

Probado como uno de trabajo: 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);

Answer 4

Puede intentar usar React Hooks para establecer el estado del componente .

import React, { setState } from ''react'';

const Button = () => {
  const [double, setDouble] = setState(false);
  return (
    <button
      disabled={double}
      onClick={() => {
        // doSomething();
        setDouble(true);
      }}
    />
  );
};

export default Button;

Asegúrese de que está utilizando la ^16.7.0-alpha.x de react y react-dom .

¡Espero que esto te ayude!

Answer 5

Si lo desea, sólo tiene que evitar enviar.

¿Qué hay de usar el lodash.js throttle

Crea una función acelerada que solo invoca la función como máximo una vez por cada milisegundos de espera.

https://lodash.com/docs/4.17.11#throttle

<Button accessible={true}
    onPress={_.throttle(async () => {
                await this.props._selectUserTickets(this.props._accountId)
    }, 10000)}
></Button>