Languages
[Edit]
DE

React - Formularübertragung

3 points
Created by:
Nikki
9950

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