Languages
[Edit]
PL

React - resetowanie formularza

3 points
Created by:
maryam
791

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