Utwórz prosty formularz logowania w React

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:

// ONLINE-RUNNER:browser;

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

Tak przedstawia się moja wersja prostego formularza logowania w React.

Jeśli masz jakieś pytania, możesz je zadać w naszej sekcji pytań, z przyjemnością Ci pomożemy. 😊
Do zobaczenia w kolejnych postach! 

Powiązane posty

• React - prosty formularz logowania