Languages
[Edit]
PL

React - prosty formularz logowania

3 points
Created by:
Dirask JS Member
3460

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 );

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