Languages
[Edit]
DE

React - Formularübertragung

3 points
Created by:
Nikki
10460

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 );

ReactJS (DE)

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join