React - prosty formularz rejestracji

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

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