React - resetowanie formularza

W tym artykule chcielibyśmy pokazać, jak resetować pola w formularzach w Reakcie.

Poniższy przykład pokazuje formularz używany wewnątrz komponentu funkcyjnego z dwoma wejściami: username i password.

Do przechowywania danych używamy hooka useState dla każdego elementu input. Aby zresetować stan, konieczne jest ustawienie '' (pusty string) za pomocą funkcji setUsername i setPassword.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';

const Form = () => {
	const [username, setUsername] = React.useState();
	const [password, setPassword] = React.useState();
	const handleReset = e => {
		setUsername('');
		setPassword('');
	}
	return (
	  <form onSubmit={e => e.preventDefault()}>
	    <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 onClick={handleReset}>Reset</button>
	  </form>
	);
};

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

Lepsze rozwiązanie:

W tym rozwiązaniu stan każdego z wejść przechowujemy w jednym obiekcie data. Obiekt ten zawiera właściwości nazwane tak samo jak właściwości input ("username" i "password"). Właściwości wejściowe zostaną wyczyszczone przez nadpisanie obiektu data przez setData({}). Aby zapobiec ustawieniu wartości null i undefined, użyliśmy operatora ?? z '' jako wartością alternatywną.

Uwaga:

W tym przykładzie używamy nowych funkcji wprowadzonych w ES2020 ( ECMAScript 2020).
Przejdź tutaj, aby przeczytać więcej o operatorze ?.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from react';

const Form = () => {
	const [data, setData] = React.useState({}); // inicjalizacja pustego obiektu
	const handleChange = e => {
		const target = e.target;
		setData({ ...data, [target.name]: target.value });
	};
	const handleReset = () => setData({});
	return (
	  <form onSubmit={e => e.preventDefault()}>
	  <div>
	    <label>Nazwa użytkownika: </label>
	    <input type="text"
	           name="username" value={data?.username ?? ''}
	           onChange={handleChange} />
	    </div>
	    <div>
	      <label>Hasło: </label>
	      <input type="password"
	             name="password" value={data?.password ?? ''}
	             onChange={handleChange} />
	    </div>
	    <button onClick={handleReset}>Reset</button>
	  </form>
	);
};

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