Languages
[Edit]
PL

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

1 points
Created by:
DEX7RA
220

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─ů.

ReactJS (PL)

React - formularz z u┼╝yciem useState (kontrolowany komponent)
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