Desactivar botón en React

1. Desactivar botón en React
2. Desactivar el botón después de hacer clic en el botón en React
3. Botón Desactivar cuando el campo de entrada está vacío y Activar cuando el usuario escribe en el campo de entrada

Introduciremos cómo deshabilitar el botón en react.js usando un accesorio deshabilitado en nuestro elemento button.

También introduciremos el método para deshabilitar el botón después de haber hecho clic en él.

También presentaremos el método para usar disable the button en los formularios para evitar que los usuarios hagan clic en los botones antes de ingresar datos en los campos de entrada.

Desactivar botón en React

Para simplemente deshabilitar el botón, podemos utilizar la prop disabled en nuestro elemento de botón y establecer su valor en true. Es la forma más sencilla de desactivar cualquier botón en React.

Código de ejemplo:

# react.js
import React from "react";
function Disable(){
return <button disabled={true}>I am Disabled!</button>
}
export default Disable

Producción:

Puede ver en la vista previa de salida anterior que nuestro botón está deshabilitado.

Desactivar el botón después de hacer clic en el botón en React

Si queremos deshabilitar nuestro botón después de hacer clic en él, podemos deshabilitarlo usando el estado de React. Estableceremos el estado disable del botón en false al cargar y agregaremos la función onClick en nuestro elemento de botón, que establecerá el estado deshabilitar del botón en true. Por lo tanto, cuando un usuario hace clic en el botón, cambiará su estado disable a true.

Código de ejemplo:

# react.js
import React from "react";
function DisableAfterClick() {
  const [disable, setDisable] = React.useState(false);

  return (
    <button disabled={disable} onClick={() => setDisable(true)}>
      Click to Disable!
    </button>
  );
}
export default DisableAfterClick

Producción:

Puede ver en la vista previa de salida anterior que nuestro botón está deshabilitado. Pero no hay forma de habilitar el botón después de deshabilitarlo.

Botón Desactivar cuando el campo de entrada está vacío y Activar cuando el usuario escribe en el campo de entrada

Si queremos habilitar un botón deshabilitado cuando un usuario ingresa texto en el campo de entrada y deshabilitarlo cuando el usuario borra el campo de entrada, podemos usar una función disabled. Entonces, cuando el usuario escribe algo en el campo de entrada, la función disabled obtendrá un valor false de !text, que cambiará el estado de un botón de disabled a enabled. Y cuando el usuario borra el campo de entrada, !text devolverá true y cambiará el state del botón a disabled.

Código de ejemplo:

import React, { useState } from "react";

function EnableOnInputChange() {
  const [text, enableButton] = useState("");

  const handleTextChange = (event) => {
    enableButton(event.target.value);
  };


  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Your state values: \n 
            text: ${text} \n 
            You can replace this alert with your process`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Enter Text</label>
        <input
          type="text"
          name="text"
          placeholder="Enter Text"
          onChange={handleTextChange}
          value={text}
        />
      </div>
      
      <button type="submit" disabled={!text}>
        Enable
      </button>
    </form>
  );
}

export default EnableOnInputChange

Producción:

Puede ver en la salida anterior, cuando ingresamos en el botón de campo de entrada está habilitado, y cuando borramos, el botón de campo de entrada se deshabilita nuevamente.