React - przesłanie formularza

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.

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// 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>Nazwa użytkownika: </label>
        <input type="text" ref={usernameRef} />
      </div>
      <div>
        <label>Hasło: </label>
        <input type="password" ref={passwordRef} />
      </div>
      <button type="submit">Zatwierdź</button>
    </form>
  );
};

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