PL
React - przesłanie formularza
3 points
W tym artykule chcielibyśmy pokazać, jak przesłać formularz w Reakcie.
W poniższym przykładzie używamy hooka React.useRef do utworzenia referencji usernameRef i passwordRef, dzięki którym mamy dostęp do pól formularza HTML.
W funkcji handleSubmit:
- zapobiegamy przeładowaniu się strony za pomocą metody
preventDefault() - używamy referencji, aby pobrać wartości pól i utworzyć obiekt
data, który jest konwertowany na JSON i wyświetlany w konsoli - możemy również wysłać ten JSON do backendu za pomocą żądania AJAX.
Funkcja handleSubmit jest wykonywana w odpowiedzi na zdarzenie onSubmit, które jest wywoływane po kliknięciu przycisku Submit.
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX: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>Nazwa użytkownika: </label>22
<input type="text" ref={usernameRef} />23
</div>24
<div>25
<label>Hasło: </label>26
<input type="password" ref={passwordRef} />27
</div>28
<button type="submit">Zatwierdź</button>29
</form>30
);31
};32
33
const root = document.querySelector('#root');34
ReactDOM.render(<Form />, root );