Languages
[Edit]
PL

Utwórz prosty formularz logowania w React

6 points
Created by:
Dirask Community
6900

Witam! 👋😊

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

Efekt końcowy:

Prosty formularz logowania w React
Prosty formularz logowania w React

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

ReactJS - Artykuły

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