DE
React - Formularübertragung
3 points
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.
xxxxxxxxxx1
// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:2
// import React from 'react';3
4
const Form = () => {5
const usernameRef = React.useRef();6
const passwordRef = React.useRef();7
8
const handleSubmit = e => {9
e.preventDefault();10
const data = {11
username: usernameRef.current.value,12
password: passwordRef.current.value13
};14
const json = JSON.stringify(data, null, 4);15
console.clear();16
console.log(json);17
};18
return (19
<form onSubmit={handleSubmit}>20
<div>21
<label>Benutzername: </label>22
<input type="text" ref={usernameRef} />23
</div>24
<div>25
<label>Passwort: </label>26
<input type="password" ref={passwordRef} />27
</div>28
<button type="submit">Bestätigen</button>29
</form>30
);31
};32
33
const root = document.querySelector('#root');34
ReactDOM.render(<Form />, root );