دورة react js للمبتدئين الدرس الرابع عشر
فهاد الدرس الرابع عشر من دورة react js للمبتدئين لي غادي يكون تتمة للدرس السابق غادي نكملوا لفورم ديالنا ونزيدو المزيد من الحقول ومنبعد غادي نشوفوا كيفاش نعرض القيم من الفورم من بعد ما نسترجعها.
1- إضافة المزيد من القيم ل state
فالفورم ديالنا غادي نزيد فيها textarea و selectbox لكن قبل ما نزيدهم غادي نزيد ف state les variables لي غادي ياخدو القيم ديالهم.
فعندي bio لي هي لقيمة ديال textarea وville لي هي ديال selectbox ولي غادي ياخذ كقيمة أولية votre ville.
فالتغيير لي درت على state هو :
//
constructor(props){
super(props);
this.state = {
nom : '',
prenom : '',
bio : 'Biographie',
ville : 'Votre ville'
}
}
2- إضافة الحقول فالفورم
فغادي نزيد textarea و selectbox فالفورم كيف قلنا ف selectbox عندي option عندو نفس القيمة لي حددنا ف state ولي فل value كنعطيه هاد القيمة.
وفل onChange يعني فاش تغير القيمة ديالهم كتنفذ ل fonction handleVille و handleBio لي غادي نزيدوهم من بعد.
فالتغيير لي درت على ل form هو :
//
<form onSubmit={this.handleFormSubmit}>
<div className="form_element">
<label htmlFor="name">Nom</label>
<input
onChange={this.handleNom}
value={this.state.nom}
/>
</div>
<div className="form_element">
<label htmlFor="prenom">Prénom: </label>
<input
onChange={this.handlePrenom}
value={this.state.prenom}
/>
</div>
<div className="form_element">
<label htmlFor="bio">Biographie: </label>
<textarea
rows="5"
cols="30"
onChange={this.handleBio}
value={this.state.bio}
/>
</div>
<div className="form_element">
<label htmlFor="ville">Ville: </label>
<select
name="ville"
value={this.state.ville}
onChange={this.handleVille}
id="ville"
>
<option value="Votre ville" disabled>Votre ville: </option>
<option value="Rabat">Rabat</option>
<option value="Taza">Taza</option>
<option value="Fes">Fés</option>
</select>
</div>
<button type="submit">Valider</button>
</form>
3- استرجاع القيم من الحقول وعرضها
فكيف شفنا فالجزء السابق زدنا les fonctions لي مكنوا من استرجاع nom ول prénom وهنا ل fonction handleBio و handleVille كيديرو نفس الشي كيسترجعوا القيم من textarea و selectbox وكيخزنوهم ف state.
زدنا ايضا fonction handleFormSubmit لي فقط كتعرض القيم لي عندي ف state منبعد مكنضغط على valider كيف كنشوف فالصورة :
الكود كامل هو :
//
import React,{Component} from 'react';
import Header from './Header/header';
import './index.css';
class Controlled extends Component {
constructor(props){
super(props);
this.state = {
nom : '',
prenom : '',
bio : 'Biographie',
ville : 'Votre ville'
}
}
handleNom = (event)=>{
this.setState({
nom : event.target.value
})
// console.log(event.target.value);
}
handlePrenom = (event)=>{
this.setState({
prenom : event.target.value
});
// console.log(event.target.value);
}
handleBio = (event) => {
this.setState({
bio : event.target.bio
});
}
handleVille = (event) => {
this.setState({
ville : event.target.value
});
}
handleFormSubmit = (event) =>{
event.preventDefault();
console.log(this.state);
}
render(){
return(
<div>
<div className="container">
<form onSubmit={this.handleFormSubmit}>
<div className="form_element">
<label htmlFor="name">Nom</label>
<input
onChange={this.handleNom}
value={this.state.nom}
/>
</div>
<div className="form_element">
<label htmlFor="prenom">Prénom: </label>
<input
onChange={this.handlePrenom}
value={this.state.prenom}
/>
</div>
<div className="form_element">
<label htmlFor="bio">Biographie: </label>
<textarea
rows="5"
cols="30"
onChange={this.handleBio}
value={this.state.bio}
/>
</div>
<div className="form_element">
<label htmlFor="ville">Ville: </label>
<select
name="ville"
value={this.state.ville}
onChange={this.handleVille}
id="ville"
>
<option value="Votre ville" disabled>Votre ville: </option>
<option value="Rabat">Rabat</option>
<option value="Taza">Taza</option>
<option value="Fes">Fés</option>
</select>
</div>
<button type="submit">Valider</button>
</form>
</div>
</div>
)
}
}
export default Controlled;
4- إضاف css لفورم
فغادي تزيد ملف ف src سميه index.css فكنزيد فيه لكود غير باش كنقاد الفورم ولي هو :
//
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form_element{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 10px 0;
}
