دورة 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;
}