Languages
[Edit]
PL

React - resetowanie formularza

3 points
Created by:
maryam
1031

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 );

Alternative titles

  1. React - resetowanie pól formularza
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS (PL)

React - resetowanie formularza
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join