React - Formularübertragung

In diesem Artikel wird gezeigt, wie man ein Formular in React übertragen kann.

Im folgenden Beispiel wird den React.useRef-Hook verwendet, um usernameRef-und passwordRef-Referenzen zu erstellen, damit man auf die HTML-Formularfelder zugreifen kann.

In der Funktion handleSubmit:

• wird das Neuladen der Seite mit hilfe der Methode preventDefault() verhindert, 
• wird eine Referenz verwendet,  um die Feldwerte abzurufen und ein data-Objekt zu erstellen, das in JSON konvertiert und in der Konsole angezeigt wird -  dieses JSON kann man auch über eine AJAX-Anfrage an das Back-End senden. 

Die Funktion handleSubmit wird als Reaktion auf das Ereignis onSubmit ausgeführt, das ausgelöst wird, wenn die Schaltfläche Submit angeklickt wird.

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:
// import React from 'react';

const Form = () => {
  const usernameRef = React.useRef();
  const passwordRef = React.useRef();

  const handleSubmit = e => {
    e.preventDefault();
    const data = {
      username: usernameRef.current.value,
      password: passwordRef.current.value
    };
    const json = JSON.stringify(data, null, 4);
    console.clear();
    console.log(json);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Benutzername: </label>
        <input type="text" ref={usernameRef} />
      </div>
      <div>
        <label>Passwort: </label>
        <input type="password" ref={passwordRef} />
      </div>
      <button type="submit">Bestätigen</button>
    </form>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );