React - tworzenie formularza z użyciem useState (kontrolowany komponent)

W tym artykule chcielibyśmy pokazać, jak w Reakcie używać formularzy z użyciem hooka useState.

Poniższy przykład pokazuje, jak stworzyć formularz jako funkcyjny komponent kontrolowany. Jest to prosty formularz z dwoma wejściami: nazwą użytkownika i hasłem oraz przyciskiem zatwierdź. 

Dzięki useState jesteśmy w stanie przechowywać nasze dane w stanie komponentu - w naszym przypadku jest to nazwa użytkownika i hasło. Stan jest zmieniany przy użyciu metod  setUsername i setPassword, które są wywoływane po wystąpieniu zdarzenia onChange. 

Gdy do właściwości value w elemencie input przypiszemy wartość undefined, przełącza się on w tryb niekontrolowany, dlatego bardzo ważne jest, aby jako stan początkowy ustawić pusty ciąg znaków, a następnie użyć ich jako wartości nieustawionych, aby zapobiec przełączaniu między kontrolowanymi i niekontrolowanymi trybami komponentów.

Szybkie rozwiązanie:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';
   
const Form = () => {
    const [username, setUsername] = React.useState('');
    const [password, setPassword] = React.useState('');
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
          username, password
        };
        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" value={username}
            onChange={e => setUsername(e.target.value)} />
        </div>
        <div>
          <label>Hasło: </label>
          <input type="password" value={password}
            onChange={e => setPassword(e.target.value)} />
        </div>
        <button type="submit">Zatwierdź</button>
      </form>
    );
};

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

Ważna uwaga:

Podczas tworzenia formularzy React zaleca używanie niekontrolowanych komponentów,
ponieważ przy kontrolowanych duża ilość elementów wejściowych z obsługą zdarzenia onChange prowadzi do pogorszenia wydajności przez wielokrotne renderowanie komponentów.

Przejdź do tego artykułu, aby zobaczyć wersję niekontrolowaną.