Languages
[Edit]
PL

React - formularz (niekontrolowany komponent)

3 points
Created by:
Dirask JS Member
3460

W tym artykule chcieliby┼Ťmy pokaza─ç, jak korzysta─ç z formularzy w┬áReact .

Poniższy przykład pokazuje, jak wykonać formularz przy użyciu niekontrolowanego komponentu funkcyjnego.

Dzi─Öki React.useRef()┬átworzymy referencje, kt├│re b─Öd─ů u┼╝ywane do uzyskania dost─Öpu do element├│w wej┼Ťciowych DOM. Referencje┬ás─ů do┼é─ůczane za po┼Ťrednictwem w┼éa┼Ťciwo┼Ťci┬áref. W poni┼╝szym przyk┼éadzie odniesienia s─ů do┼é─ůczone do danych wej┼Ťciowych┬áusername┬ái┬ápassword. Gdy wyst─ůpi zdarzenie┬áonSubmit┬á-┬áusernameRef┬ái┬ápasswordRef┬ázostan─ů┬áu┼╝yte do utworznia obiektu┬ádata┬á(usernameRef.curent.value, passwordRef.current.value).

Obiekt data może być później przesłany na serwer lub użyty do wykonania innych operacji - w naszym przypadku drukujemy go w konsoli w formie JSON.

Praktyczny przykład:

// 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 usernameRef = React.useRef();
    const passwordRef = React.useRef();
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
          username: usernameRef.current.value,
          password: passwordRef.current.value
        };
        const json = JSON.stringify(data, null, 4);
        console.clear();
      	console.log(json);
  	};
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Nazwa u┼╝ytkownika: </label>
          <input ref={usernameRef} type="text" />
        </div>
        <div>
          <label>Hasło: </label>
          <input ref={passwordRef} type="password" />
        </div>
        <button type="submit">Zatwierd┼║</button>
      </form>
    );
};

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

Uwaga:
Powy┼╝sze rozwi─ůzanie jest ca┼ékiem dobre, ale s─ů lepsze sposoby zarz─ůdzania formularzami z du┼╝─ů ilo┼Ťci─ů p├│l.

ReactJS (PL)

React - formularz (niekontrolowany 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