دورة react js للمبتدئين الدرس الثالت عشر


فهاد الدرس الجديد من دورة react js للمبتدئين غادي نشوفوا كيفاش نتعاملو مع les formulaires ف react js فغادي نشوف كيفاش نسترجع القيم من الحقول ومنبعد ندير submit لفورم.


1- إضافة الفورم للصفحة الرئيسية

أول حاجة زيد projet جديد سميه form-react من بعد حيد داكشي لي ف src وزيد فيه ملف سميه index.js.

فأول حاجة كنسترجع react ول fichier css لي غادي نزيدو من بعد ثم عندي ل class ول constructor ف state زدت جوج ديال les variables لي غادي ياخذو القيمة ديال الحقل nom و prénom.

الكود لي زدت لحد الآن هو :

                                //
import React,{Component} from 'react';
import './index.css';

class Controlled extends Component {
    constructor(props){
        super(props);
        this.state = {
            nom : '',
            prenom : ''
        }
    }
                            

2- إضافة الصفحة الرئيسية تتمة

منبعد ف render كنزيد ل form لي فيها nom و prénom ولي ف value كنعطيهم القيم لي زدت ف state.

وفل onChange يعني فاش تغير القيمة ديالهم كتنفذ ل fonction handleNom و handlePrenom لي غادي نزيدوهم من بعد.

وفل onSubmit ديال ل form يعني فاش كنضغط على valider كتنفذ ل fonction handleFormSubmit لي غادي نزيدوها من بعد.


الكود لي زدت لحد الآن هو :

                                //
import React,{Component} from 'react';
import './uncontrolled.css';

class Controlled extends Component {
    constructor(props){
        super(props);
        this.state = {
            nom : '',
            prenom : ''
        }
    }
    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>
                        <button type="submit">Valider</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default Controlled;
                            

3- استرجاع القيم من الحقول

فباش نسترجع القيم من الحقول كيف قلنا عندي deux fonctions لي هما handleNom و handlePrenom ولي كيسترجعوا القيم لي دخلنا فالحقول وكيخزنوهم ف state.

الكود لي زدت لحد الآن هو :

                                //
import React,{Component} from 'react';
import './uncontrolled.css';

class Controlled extends Component {
    constructor(props){
        super(props);
        this.state = {
            nom : '',
            prenom : ''
        }
    }
    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);
    }
    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>
                        <button type="submit">Valider</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default Controlled;