Languages
[Edit]
PL

React - prosty formularz rejestracji

3 points
Created by:
May87
827

W tym artykule chcieliby┼Ťmy pokaza─ç, jak stworzy─ç prosty┬áformularz rejestracji w┬áReact.

Prostu formularz rejestracji w Reakcie
Prostu formularz rejestracji w Reakcie

Ca┼éa konstrukcja przyk┼éadu sk┼éada si─Ö z komponentu┬áField, kt├│rego u┼╝ywamy┬áwielokrotnie┬átworz─ůc pola do wpisania┬á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;

// Uwaga: Odkomentuj poni┼╝sze linijki podczas pracy z kompilatorem JSX
// 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 emailRef = React.useRef();
  const passwordRef = React.useRef();
  const passwordConfirmRef = React.useRef();
  const handleSubmit = e => {
	  e.preventDefault();
	  const data = {
		  username: usernameRef.current.value,
		  email: emailRef.current.value,
		  password: passwordRef.current.value,
		  passwordConfirm: passwordConfirmRef.current.value
	  };
	  onSubmit(data);
  };
  return (
	<form style={formStyle} onSubmit={handleSubmit} >
	  <Field ref={usernameRef} label="Nazwa u┼╝ytkownika:" type="text" />
	  <Field ref={emailRef} label="Email:" type="text" />
	  <Field ref={passwordRef} label="Hasło:" type="password" />
	  <Field ref={passwordConfirmRef} label="Potwierdź hasło:" type="password" />
	  <div>
		<button style={submitStyle} type="submit">Zarejestruj</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 - stylizowany formularz rejestracji
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 rejestracji
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