Bouton désactiver définitivement

Question

Dans React, puis-je désactiver un bouton lorsque l'utilisateur connecté est membre ?

Lorsque j'utilise l'attribut désactivé, il peut être supprimé des outils de développement et le bouton est réactivé.

Aidez-moi, je souhaite que le bouton reste désactivé lorsque l'utilisateur connecté est membre. Même si l'attribut désactivé est supprimé des outils de développement, le bouton doit toujours rester désactivé.

Answer 1

Vous pouvez utiliser l'attribut désactivé pour désactiver un bouton, mais cela n'empêche pas l'utilisateur de supprimer l'attribut désactivé et de réactiver le bouton dans les outils de développement. Pour éviter cela, vous devez également utiliser la valeur désactivée pour gérer de manière conditionnelle l'écouteur d'événement de clic du bouton.

Par exemple :

import { useState } from "react";

export default function App() {
  const [disabled, setDisabled] = useState(false);
  const handleClick = (e) => {
    console.log(e.target);
  };

  return (
    <div className="App">
      <button onClick={() => setDisabled((disabled) => !disabled)}>
        disable button
      </button>
      <button disabled={disabled} onClick={disabled ? null : handleClick}>
        click
      </button>
    </div>
  );
}

De cette façon, même si l'utilisateur supprime l'attribut désactivé, aucun gestionnaire de clic n'est associé au bouton.