Languages
[Edit]
PL

React - przesłanie formularza

3 points
Created by:
Giles-Whittaker
349

W tym artykule chcieliby┼Ťmy pokaza─ç, jak przes┼éa─ç formularz w Reakcie.

W poniższym przykładzie używamy hooka React.useRef do utworzenia referencji usernameRef i passwordRef, dzięki którym mamy dostęp do pól formularza HTML.

W funkcji handleSubmit:

  • zapobiegamy prze┼éadowaniu si─Ö strony za pomoc─ů metody preventDefault()
  • u┼╝ywamy referencji, aby pobra─ç warto┼Ťci p├│l i utworzy─ç obiekt data, kt├│ry jest konwertowany na JSON i wy┼Ťwietlany w konsoli - mo┼╝emy r├│wnie┼╝ wys┼éa─ç ten JSON do backendu za pomoc─ů ┼╝─ůdania AJAX.

Funkcja handleSubmit jest wykonywana w odpowiedzi na zdarzenie onSubmit, które jest wywoływane po kliknięciu przycisku Submit.

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poni┼╝sze linijki podczas pracy z kompilatorem JSX:
// import React from 'react';

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 type="text" ref={usernameRef} />
      </div>
      <div>
        <label>Hasło: </label>
        <input type="password" ref={passwordRef} />
      </div>
      <button type="submit">Zatwierd┼║</button>
    </form>
  );
};

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

ReactJS (PL)

React - przesłanie 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