React reģistrācijas formas (SignUp) izveide.
Pirmais solis ietver visu formas elementu pārvēršanu kontrolētos komponentos. Tā kā vietējā stāvokļa daļas jau ir definētas komponenta augšdaļā, jums vienkārši ir jāpiešķir katra stāvokļa daļa vērtības atbalstam no katra ievades elementa. Lai varētu ņemt vērā stāvokļa atjauninājumus, katrai ievadei ir arī jādefinē onChange prop un jāizsauc stāvokļa iestatītājs ar vērtības rekvizītu no notikuma mērķa kā parametru.
Paroles ievade ir īpašs gadījums, kurā kā statuss ir objekts, nevis virkne. Rezultātā stāvokļa noteicējam ir jāizplata iepriekšējās vērtības, lai tās netiktu ignorētas. Visbeidzot, lai pārliecinātos, ka paroles rakstzīmes ir aizsegtas, ievadei jāizmanto tips “parole”.
Skaidrojums sekojošajam koda piemēram:
Noteikumi JSX sintaksei paredz, ka komponentiem jābūt ietvertiem vienā vecāk-elementā. Tādēļ šeit ir div ar klasi container, kas satur visus iekšējos komponentus.
Katrs laukums satur label ar virsrakstu un atbilstošo lauku, kas ievadītā informācija tiek uzglabāta stāvoklī. Katrs lauks satur div ar klasi Field, kas satur label un ievades komponentu.
Vārdslauks saturInputkomponentu arvalueunonChangepropertijiem, kas atbild par stāvokļa uzglabāšanu un atjaunošanu, kad lietotājs ievada informāciju.Uzvārdslauks ir līdzīgsVārdslaukam, bet ar atšķirīgu virsrakstu un stāvokli.Epasta adreselauks saturinputkomponentu, kas uzglabā un atjauno stāvokli, kad lietotājs ievada epasta adresi.Parolelauks saturinputkomponentu ar tipupassword, kas uzglabā un atjauno stāvokli, kad lietotājs ievada paroli. Stāvoklis ir kompleksa objekta forma, lai uzglabātu vairākus stāvokļus, piemēram,value,error,touched, u.tml.Konta lomalauks saturselectkomponentu ar trim opcijām:Loma,Fiziska Persona, unJuridiska Persona. Opcijas tiek uzglabātas stāvoklī, kad lietotājs izvēlas vienu no tām.
Koda piemērs:
<div className="container">
<div className="Field">
<label>
Vārds: <sup>*</sup>
</label>
<Input
value={firstName}
onChange={(e) => {
setFirstName(e.target.value);
}}
placeholder="Vārds"
/>
</div>
<div className="Field">
<label>Uzvārds:</label>
<Input
value={lastName}
onChange={(e) => {
setLastName(e.target.value);
}}
placeholder="Uzvārds"
/>
</div>
<div className="Field">
<label>
Epasta adrese:<sup>*</sup>
</label>
<input
value={email}
onChange={(e) => {
setEmail(e.target.value);
}}
placeholder="Epasta adrese"
/>
</div>
<div className="Field">
<label>
Parole <sup>*</sup>
</label>
<input
value={password.value}
type="password"
onChange={(e) => {
setPassword({...password, value: e.target.value});
}}
placeholder="Parole"
/>
</div>
<div className="Field">
<label>
Konta loma<sup>*</sup>
</label>
<select value={role} onChange={(e) => setRole(e.target.value)}>
<option value="role">Loma</option>
<option value="fiziska persona">Fiziska Persona</option>
<option value="juridiska persona">Juridiska Persona</option>
</select>
</div>
</div>Rekvizīts isTouched paroles stāvoklī tika definēts, lai noteiktu, kad un vai ievadei tika pieskāries lietotājs vismaz vienu reizi. Lai noklausītos mijiedarbību, veidlapas ievadei ir divi papildu notikumi, kurus varat abonēt: onFocus un onBlur.
Šajā scenārijā ir jāizmanto notikums onBlur, kas tiek izsaukts ikreiz, kad ievade zaudē fokusu, lai garantētu, ka lietotājs ir mijiedarbojies ar paroles ievadi vismaz vienu reizi. Šādā gadījumā rekvizītam isTouched ir jāiestata vērtība patiess “true”, izmantojot paroles stāvokļa iestatītāju.
Pēc tam kļūdas ziņojuma parādīšanas nosacījums ir atkarīgs no šīs vērtības patiesības (true vai false) un paroles garuma pārbaudes, lai redzētu, vai tā ir mazāka par 8 rakstzīmēm. Ja nosacījums ir patiess (true), ir jāatveido komponents”paroles kļūdas paziņojums” PasswordErrorMessage. Galīgajam kodam jābūt šādam:
<div className="Field">
<label>
Parole <sup>*</sup>
</label>
<input
value={password.value}
type="password"
onChange={(e) => {
setPassword({...password, value: e.target.value});
}}
onBlur={() => {
setPassword({ ...password, isTouched: true });
}}
placeholder="Parole"
/>
</div>const handleSubmit = (e) => {
e.preventDefault();
alert("Konts veiksmīgi izveidots!");
clearForm();
}; const getIsFormValid = () => {
return (
firstName &&
validateEmail(email) &&
password.value.length >= 8 &&
role !== "role"
);
}; Visbeidzot, lai notīrītu veidlapas stāvokli pēc veiksmīgas iesniegšanas, katrai stāvokļa daļai ir jāiestata tā sākotnējā vērtība:
const clearForm = () => {
setFirstName("");
setLastName("");
setEmail("");
setPassword({
value: "",
isTouched: false,
});
setRole("role");
}; Tātad pilns aplikācijas reģistrācijas formas kods šobrīd izskatīsies šādi:
import React, { useState } from "react";
function PasswordErrorMessage() {
return <p className="FieldError">Parolei jāsastāv vismaz no 8 rakstzīmēm!</p>;
}
function App() {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState({
value: "",
isTouched: false,
});
const [role, setRole] = useState("role");
const getIsFormValid = () => {
return (
firstName &&
validateEmail(email) &&
password.value.length >= 8 &&
role !== "role"
);
};
const clearForm = () => {
setFirstName("");
setLastName("");
setEmail("");
setPassword({
value: "",
isTouched: false,
});
setRole("role");
};
const handleSubmit = (e) => {
e.preventDefault();
alert("Account created!");
clearForm();
};
return (
<div className="App">
<form onSubmit={handleSubmit}>
<fieldset>
<h2>Reģistrācijas forma</h2>
<div className="Field">
<label>
Vārds: <sup>*</sup>
</label>
<input
value={firstName}
onChange={(e) => {
setFirstName(e.target.value);
}}
placeholder="Jūsu Vārds"
/>
</div>
<div className="Field">
<label>Uzvārds:</label>
<input
value={lastName}
onChange={(e) => {
setLastName(e.target.value);
}}
placeholder="Jūsu Uzvārds"
/>
</div>
<div className="Field">
<label>
Ēpasta adrese: <sup>*</sup>
</label>
<input
value={email}
onChange={(e) => {
setEmail(e.target.value);
}}
placeholder="Ēpasta adrese"
/>
</div>
<div className="Field">
<label>
Parole: <sup>*</sup>
</label>
<input
value={password.value}
type="password"
onChange={(e) => {
setPassword({ ...password, value: e.target.value });
}}
onBlur={() => {
setPassword({ ...password, isTouched: true });
}}
placeholder="Izveidojiet paroli"
/>
{password.isTouched && password.value.length < 8 ? (
<PasswordErrorMessage />
) : null}
</div>
<div className="Field">
<label>
Konta loma: <sup>*</sup>
</label>
<select
value={role}
onChange={(e) => setRole(e.target.value)}
>
<option value="role">Loma</option>
<option value="individual">Privātpersona</option>
<option value="business">Uzņēmējs</option>
</select>
</div>
<button type="submit" disabled={!getIsFormValid()}>
Izveidot kontu
</button>
</fieldset>
</form>
</div>
);
}
function validateEmail(email) {
// email validation logic
return true;
}
export default App;un šī koda vizuālais iznākums būs šāds:
Protams šāds formas izskats mūsu react aplikācijas izmantotājiem un lietotājiem varētu arī nepatikt, tāpēc pievienosim nedaudz CSS veidotu stilu, lai noformētu reģistrācijas formu un padarītu to nedaudz interesantāku , un glītaku:
tāpēc atveram React aplikācijas failu index.css un aizstājam visu tajā esošo CSS kodu ar šo kodu (protams varat rakstīt arī paši savu CSS kodu)
index.css:
.App {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f3f3f3;
}
form {
display: flex;
flex-direction: column;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
background-color: #fff;
transform: perspective(1000px) rotateX(20deg);
}
h2 {
font-size: 2rem;
font-weight: 500;
margin-bottom: 40px;
}
.Field {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
label {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 10px;
}
input,
select {
padding: 10px 15px;
border: none;
border-radius: 5px;
font-size: 1rem;
background-color: #f3f3f3;
}
button[type="submit"] {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1.2rem;
font-weight: 500;
background-color: #36c6d3;
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease;
}
button[type="submit"]:hover {
background-color: #2ea5ad;
}
.FieldError {
font-size: 0.8rem;
color: #f44336;
}Kods definē tīmekļa lapu izskatu, kā arī stilizēs ievades laukus, kas tiek izmantoti lapā. Koda daļas ir:
.App – definē tīmekļa lapas izskatu, ievietojot tā saturu centrā un pozicionējot to pa vertikāli centrāli, aizpildot tā augstumu ar pelēku fona krāsu.
form – definē stilu formai, ko izmanto tīmekļa lapā, tās izskatu un pozicionējumu. Forma tiek izvietota pa vidu tīmekļa lapām, tās krāsa ir baltā un tai ir ievietota apakšā ēna. Arī forma ir rotēta uz 20 grādiem pa X asi, tāpat kā perspektīvu.
h2 – definē forma virsrakstu, tā izmēru, fontu un izvietojumu.
.Field – definē stila izskatu, kas visiem ievades laukiem, to izmēru un pozicionējumu.
label – definē stila izskats, kas nepieciešams visiem ievades lauku nosaukumiem, to izmēru un pozicionējumu.
input, select – definē stila izskatu, kas visiem un izvēles ievades laukiem, to izmēru un pozicionējumu.
button[type=”submit”] – definē stila izskatu, kas nepieciešams pogai, lai iesniegtu formu. Pogai ir noteikts izmērs, krāsa, fonta izmērs, svars un pozicionējums. Tāpat arī ir definēts, ka pogas fona krāsai jāmainās, kad uz tās tiek peles kursors.
button[type=”submit”]:hover – definē stila izskatu, kas nepieciešams pogai, kad uz tās ir tiek peles kursors.
.FieldError – definē stila ievada izskatu, kas nepieciešama, ja laukā ir kļūda. Šajā gadījumā kļūdas teksts tiek attēlots sarkanā krāsā un mazāka fonta izmērā.
gala iznākums tagad ir šāds:
Protams, šis kods un reģistrācijas forma ir veidots kā ieskats un viena nodaudzajām iespējamajām versijām šādas React formas izveidei. Šo kodu iespējams papildinat, pemērot savām vajadzībām un papildinat ja nepieciešams.
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.