Languages
[Edit]
PL

React - resetowanie formularza

3 points
Created by:
maryam
251

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

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