React Project: Step11 Auth

新建Auth界面

类似checkourder的表单；
对input的value和state进行双向绑定；
且加入有效检查‘

import React,{
   Component} from 'react';
import Input from '../../components/UI/Input/Input';
import Button from '../../components/UI/Button/Button';
import classes from './Auth.css';
class Auth extends Component{
   
    state={
   
        controls:{
   
            email: {
   
                elementType:'input',
                elementConfig:{
   
                    type:'email',
                    placeholder:'Mail Address'
                },
                value:'',
                validation:{
   
                    required:true,
                    isEmail:true
                },
                valid:false,
                touched:false
            },
            password: {
   
                elementType:'input',
                elementConfig:{
   
                    type:'password',
                    placeholder:'Password'
                },
                value:'',
                validation:{
   
                    required:true,
                    minLength:6
                },
                valid:false,
                touched:false
            }
        }
    }

    checkValidity(value, rules){
   
        let isValid= true;
        if(rules.required&&isValid){
   
            isValid= value.trim()!=='';   //.trim()可以可以防止空格
        }

        if(rules.minLength&&isValid){
   
            isValid= value.length>=rules.minLength;
        }

        if(rules.maxLength&&isValid){
   
            isValid= value.length<=rules.maxLength;
        };

        return isValid;
    };


    inputChangedHandler = (event, controlName)=>{
   
        const updatedControls = {
   
            ...this.state.controls,
            [controlName]:{
   
                ...this.state.controls[controlName],
                value:event.target.value,
                //使用检查函数
                valid:this.checkValidity(event.target.value, this.state.controls[controlName].validation),
                touched:true   //标记为输入过
            }
        };
        this.setState({
   controls:updatedControls});
    }


    render(){
   
        const formElementArray = [];
        for(let key in this.state.controls){
        //遍历每个name
            formElementArray.push({
   
                id:key,
                config:this.state.controls[key]
            });
        };

        const form = formElementArray.map(formElement=>(
            <Input 
                key={
   formElement.id}
                elementType={
   formElement.config.elementType} 
                elementConfig={
   formElement.config.elementConfig} 
                value={
   formElement.config.value}
                changed={
   (event)=>this.inputChangedHandler(event,formElement.id)}
                invalid={
   !formElement.config.valid}
                shouldValidate={
   formElement.config.validation&& formElement.config.touched}
            />
        ));

        return(
            <div className={
   classes.Auth}>
                <form>
                    {
   form}
                    <Button btnType="Success">SUBMIT</Button>
                </form>
            </div>
        );
    };
};

export default Auth;

在navigtaion中加入此component——link；

import React from 'react';

import classes from './NavigationItems.css';
import NavigationItem from './NavigationItem/NavigationItem';

const navigationItems = () => (
    <ul className={
   classes.NavigationItems}>
        <NavigationItem link="/" exact>Burger Builder</NavigationItem>
        <NavigationItem link="/orders">Orders</NavigationItem>
        <NavigationItem link="/auth">Authenticate</NavigationItem>
    </ul>
);

export default navigationItems;

在app.js中加入此route；

import React, {
    Component } from 'react';
import {
   Route, Switch} from 'react-router-dom';
import Layout from './hoc/Layout/Layout';
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
import Checkout from './containers/Checkout/Ch