Languages
[Edit]
PL

React - prosty formularz logowania

3 points
Created by:
Rubi-Reyna
677

W tym artykule chcielibyśmy pokazać, jak stworzyć prosty stylizowany formularz logowania w React.

Prosty formularz logowania w Reakcie
Prosty formularz logowania w Reakcie

Cała konstrukcja przykładu składa się z komponentu Field, którego możemy wielokrotnie użyć tworząc pola nazwy użytkownika i hasła oraz z komponentu Form, który składa to wszystko w całość.

W naszym przypadku do stylizowania została użyta właściwość Style.  
Aby uzyskać wartości wpisane przez użytkownika, wykorzystaliśmy hooka useRef, dzięki któremu w łatwy sposób możemy uzyskać uchwyt do elementu DOM i pobrać aktualną wartość.

Z użyciem tych wartości budujemy obiekt, który po przetworzeniu zdarzenia onSubmit możemy następnie wysłać na serwer.

Domyślnie właściwość ref jest zarezerwowana przez React i dlatego powinniśmy użyć funkcji forwardRef().

Aby zapobiec ponownemu załadowaniu strony przez zdarzenie onSubmit, jawnie wywołaliśmy  metodę preventDefault().

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const formStyle = {
  margin: '0 auto',
  padding: '10px',
  border: '1px solid #c9c9c9',
  borderRadius: '5px',
  background: '#f7fdf8',
  width: '220px',
};

const labelStyle = {
  margin: '10px 0 5px 0',
  fontFamily: 'Arial, Helvetica, sans-serif',
  fontSize: '15px',
};

const inputStyle = {
  margin: '5px 0 10px 0',
  border: '1px solid #bfbfbf',
  borderRadius: '3px',
  padding: '5px', 
  boxSizing: 'border-box',
  width: '100%'
};

const submitStyle = {
  margin: '10px 0 0 0',
  padding: '7px 10px',
  border: '1px solid #efffff',
  borderRadius: '3px',
  background: '#3085d6',
  width: '100%',
  fontSize: '15px',
  color: 'white',
  display: 'block'
};

const Field = React.forwardRef(({label, type}, ref) => {
  return (
    <div>
      <label style={labelStyle} >{label}</label>
      <input ref={ref} type={type} style={inputStyle} />
    </div>
  );
});

const Form = ({onSubmit}) => {
  const usernameRef = React.useRef();
  const passwordRef = React.useRef();
  const handleSubmit = e => {
    e.preventDefault();
    const data = {
      username: usernameRef.current.value,
      password: passwordRef.current.value
    };
    onSubmit(data);
  };
  return (
    <form style={formStyle} onSubmit={handleSubmit} >
      <Field ref={usernameRef} label="Nazwa użytkownika:" type="text" />
      <Field ref={passwordRef} label="Hasło:" type="password" />
      <div>
        <button style={submitStyle} type="submit">Zaloguj</button>
      </div>
    </form>
  );
};

// Przykład:

const App = () => {
  const handleSubmit = data => {
    const json = JSON.stringify(data, null, 4);
    console.clear();
    console.log(json);
  };
  return (
    <div>
      <Form onSubmit={handleSubmit} />
    </div>
  );
};

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

Alternative titles

  1. React - prosty wystylowany formularz logowania
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 - prosty formularz logowania
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