Schaltfläche in React deaktivieren

1. Schaltfläche in React deaktivieren
2. Deaktivieren eines Buttons nach einem Klick in React
3. Schaltfläche deaktivieren, wenn das Eingabefeld leer ist und aktivieren, wenn der Benutzer in das Eingabefeld eingibt

Wir werden vorstellen, wie man den Button in React.js mit einem deaktivierten Prop zu unserem button-Element deaktiviert.

Wir werden auch die Methode zum Deaktivieren der Schaltfläche vorstellen, nachdem wir darauf geklickt haben.

Wir stellen auch die Methode vor, mit der disable the button in Formularen verwendet wird, um Benutzer davon abzuhalten, auf Schaltflächen zu klicken, bevor sie Daten in Eingabefelder eingeben.

Schaltfläche in React deaktivieren

Um den Button einfach zu deaktivieren, können wir den disabled prop in unserem Button-Element verwenden und seinen Wert auf true setzen. Es ist der einfachste Weg, eine beliebige Schaltfläche in React zu deaktivieren.

Beispielcode:

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

Ausgabe:

Sie können in der obigen Ausgabevorschau sehen, dass unsere Schaltfläche deaktiviert ist.

Deaktivieren eines Buttons nach einem Klick in React

Wenn wir unsere Schaltfläche nach dem Anklicken deaktivieren möchten, können wir sie deaktivieren, indem wir den Status von React verwenden. Wir werden den Zustand disable des Buttons beim Laden auf false setzen und die Funktion onClick in unserem Button-Element hinzufügen, die den Zustand disable des Buttons auf true setzt. Wenn ein Benutzer auf die Schaltfläche klickt, ändert sie ihren Status disable in true.

Beispielcode:

# 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

Ausgabe:

Sie können in der obigen Ausgabevorschau sehen, dass unsere Schaltfläche deaktiviert ist. Es gibt jedoch keine Möglichkeit, die Schaltfläche zu aktivieren, nachdem sie deaktiviert wurde.

Schaltfläche deaktivieren, wenn das Eingabefeld leer ist und aktivieren, wenn der Benutzer in das Eingabefeld eingibt

Wenn wir eine deaktivierte Schaltfläche aktivieren möchten, wenn ein Benutzer Text in das Eingabefeld eingibt und sie deaktiviert, wenn der Benutzer das Eingabefeld löscht, können wir eine Funktion disabled verwenden. Wenn der Benutzer also etwas in das Eingabefeld eingibt, erhält die Funktion disabled von !text einen false Wert, der den Zustand einer Schaltfläche von disabled auf enabled ändert. Und wenn der Benutzer das Eingabefeld löscht, gibt !text true zurück und ändert den state der Schaltfläche auf disabled.

Beispielcode:

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

Ausgabe:

Sie können in der obigen Ausgabe sehen, wenn wir die Eingabefeld-Schaltfläche eingeben, ist sie aktiviert, und wenn wir sie löschen, ist die Eingabefeld-Schaltfläche wieder deaktiviert.