Languages
[Edit]
PL

React - prosty formularz logowania

3 points
Created by:
Rubi-Reyna
367

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