Désactiver le bouton dans React

1. Désactiver le bouton dans React
2. Désactiver le bouton après un clic sur le bouton dans React
3. Désactiver le bouton lorsque le champ de saisie est vide et activer lorsque l’utilisateur saisit le champ de saisie

Nous allons présenter comment désactiver le bouton dans react.js en utilisant un accessoire désactivé pour notre élément button.

Nous présenterons également la méthode pour désactiver le bouton après avoir cliqué dessus.

Nous présenterons également la méthode pour utiliser disable the button dans les formulaires pour empêcher les utilisateurs de cliquer sur les boutons avant de saisir des données dans les champs de saisie.

Désactiver le bouton dans React

Pour simplement désactiver le bouton, nous pouvons utiliser la propriété disabled dans notre élément de bouton et définir sa valeur sur true. C’est le moyen le plus simple de désactiver n’importe quel bouton en React.

Exemple de code :

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

Production :

Vous pouvez voir dans l’aperçu de sortie ci-dessus que notre bouton est désactivé.

Désactiver le bouton après un clic sur le bouton dans React

Si nous voulons désactiver notre bouton après avoir cliqué dessus, nous pouvons le désactiver en utilisant l’état de react. Nous allons définir l’état disable du bouton sur false au chargement et ajouter la fonction onClick dans notre élément button, qui définira l’état disable du bouton sur true. Ainsi, lorsqu’un utilisateur clique sur le bouton, il changera son état disabled en true.

Exemple de code :

# 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

Production :

Vous pouvez voir dans l’aperçu de sortie ci-dessus que notre bouton est désactivé. Mais il n’y a aucun moyen d’activer le bouton une fois qu’il est désactivé.

Désactiver le bouton lorsque le champ de saisie est vide et activer lorsque l’utilisateur saisit le champ de saisie

Si nous voulons activer un bouton désactivé lorsqu’un utilisateur saisit du texte dans le champ de saisie et le désactiver lorsque l’utilisateur efface le champ de saisie, nous pouvons utiliser une fonction disabled. Ainsi, lorsque l’utilisateur tape quelque chose dans le champ de saisie, la fonction disabled obtiendra une valeur false de !text, ce qui fera passer state du bouton de disabled à enabled. Et lorsque l’utilisateur efface le champ de saisie, !text retournera true et changera state du bouton en disabled.

Exemple de code :

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

Production :

Vous pouvez voir dans la sortie ci-dessus, lorsque nous entrons dans le bouton de champ de saisie est activé, et lorsque nous effaçons, le bouton de champ de saisie est à nouveau désactivé.