javascript firebase创建对象状态反应传播运算符

Posted 2021-05-03

import React, {Component} from 'react';
import {InputGroup, InputGroupAddon, Input} from 'reactstrap';
import {Button} from 'reactstrap';

import "./enregistrement.css"
import {Jumbotron} from 'reactstrap';
import base from "./base";
import Navigation from "./navigation/Navigation";

class EnregistrementPro extends Component {
    state = {
        nom: "",
        prenom: "",
        email: "",
        users: {},
        addNewpro:[]
    }

    addUsers = () => {
        const newPro = {
            nom: this.state.nom,
            prenom: this.state.prenom,
            email: this.state.email,
        };

        this.setState({ addNewpro: [...this.state.addNewpro, newPro]})
        alert("Merci pour votre interet nous prendrons contact avec vous rapidement")
    };


    handleChange = (e) => {
        console.log(e.target.name);
        this.setState({[e.target.name]: e.target.value})
    };


    componentDidMount() {
        base.syncState('/', {
            context: this,
            state: 'addNewpro',
            asArray: true
        })
    }

    render() {
        return (


            <div>
                <Navigation/>
                <header>
                    <h1>Vous cherchez des chantiers ?</h1>
                       <h3>Nous avons les clients
                           qu'il vous faut !</h3>
                </header>

                <h1 className="p60">Développez votre
                    activité maintenant !</h1>
                <div className="enregistrement p60">

                    <div
                        className="p-3 mb-2 shadow-lg p-3 mb-5  rounded formulaire"
                    >
                        {/*nom*/}
                        <div className="form-group ">
                            <label htmlFor="exampleInputEmail1 ">Nom</label>
                            <input
                                type="name"
                                className="form-control"
                                id="exampleInputEmail1"
                                aria-describedby="emailHelp"
                                name="nom"
                                onChange={this.handleChange}
                            />
                        </div>

                        {/*Prenom*/}
                        <div className="form-group">
                            <label htmlFor="exampleInputPassword1">prenom</label>
                            <input
                                type="prenom"
                                name="prenom"
                                className="form-control"
                                id="exampleInputPassword1"
                                onChange={this.handleChange}
                            />
                        </div>
                        {/*email*/}
                        <div className="form-group">
                            <label htmlFor="exampleInputPassword1">Email</label>
                            <input
                                type="email"
                                name="email"
                                className="form-control"
                                id="exampleInputPassword1"
                                onChange={this.handleChange}
                            />
                        </div>
                        <button
                            onClick={this.addUsers}
                            type="submit"
                            className="btn btn-primary ">
                            Enregistrez-vous
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}

export default EnregistrementPro;