React - prosty formularz rejestracji
W tym artykule chcielibyśmy pokazać, jak stworzyć prosty formularz rejestracji w React.
![Prostu formularz rejestracji w Reakcie](/static/bucket/1615217038927-5WlYkm8AN2--registry%20form%20pl.png)
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ć funkcjiforwardRef()
.
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 );