Utwórz prosty formularz logowania w React

1 contributors

2 contributions

0 discussions

6 points

Created by:

telsa

502

Witam! 👋😊

W tym artykule chciałbym pokazać wam, jak zrobić prosty formularz logowania w Reakcie.

Efekt końcowy:

Poniżej postaram się wyjaśnić, jak w kilku krokach stworzyć taki formularz.

Cała struktura przykładu składa się z komponentu Field, który służy jako kod wielokrotnego użytku ♻, oraz z komponentu Form, który składa wszystko razem.

W naszym przypadku do stylowania wykorzystaliśmy właściwość style. 🎨

Aby uzyskać wartości wpisane przez użytkownika w danych wejściowych, użyłem hooka useRef, za pomocą którego możemy łatwo uzyskać uchwyt do elementu DOM i pobrać aktualną wartość.

Korzystając z tych wartości, budujemy obiekt, który po obsłudze onSubmit możemy wysłać na serwer. 📤

Aby zapobiec przeładowaniu strony po wystąpieniu zdarzenia onSubmit, jawnie wywołaliśmy metodę preventDefault().

📝Uwaga:

Domyślnie właściwość ref jest zarezerwowana przez Reakta, więc powinniśmy skorzystać z funkcji forwardRef.

Wykonalny przykład:

xxxxxxxxxx
 
// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.
// import React from 'react';
// import ReactDOM from 'react-dom';
​
const appStyle = {
    height: '250px',
    display: 'flex'
};
​
const formStyle = {
    margin: 'auto',
    padding: '10px',
    border: '1px solid #c9c9c9',
    borderRadius: '5px',
    background: '#f5f5f5',
    width: '220px',
    display: 'block'
};
​
const labelStyle = {
    margin: '10px 0 5px 0',
    fontFamily: 'Arial, Helvetica, sans-serif',
    fontSize: '15px',
};
​
const inputStyle = {
    margin: '5px 0 10px 0',
    padding: '5px', 
    border: '1px solid #bfbfbf',
    borderRadius: '3px',
    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">Zatwierdź</button>
        </div>
      </form>
    );
};
​
// Usage example:
​
const App = () => {
    const handleSubmit = data => {
        const json = JSON.stringify(data, null, 4);
        console.clear();
        console.log(json);
    };
    return (
      <div style={appStyle}>
        <Form onSubmit={handleSubmit} />
      </div>
    );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );