react-07-3 Login Form收集表单数据

在react-07-2 Login Form基础上修改Login.jsx

import React,{Component} from 'react'
import {Form,Icon,Input,Button} from 'antd'
import './login.less'
import logo from './images/logo.png'

/*登录的路由组件*/
class Login extends Component{


    //实现方法
    //第四步：取输入框中对应的值
    handleSubmit = (event) =>{
        //阻止事件的默认行为,点击提交按钮不会默认提交
        event.preventDefault();
        //如何得到form对象
        const form = this.props.form;
        //获取表单项的输入数据
        const values = form.getFieldsValue();
        console.log(values);

    }

    render(){
        //2====》第二步
        //当包装了Form组件之后，我们的这个Form组件就可以得到form对象了
        //该对象具有获取以及进行表单验证的一些方法
        const form = this.props.form;
        //说明form对象里面有一个getFieldDecorator属性：函数，方法===》标识名称，配置对象
        const {getFieldDecorator} = this.props.form;

        return (<div className="login">
            <header className="login-header">
                <img src={logo} alt=""/>
                <h1>React项目，后台管理系统</h1>
            </header>
            <section className="login-content">
                <h2>用户登录</h2>
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item>
                        {/*3====》第三步
                        函数里面又包含一个（）括号，说明getFieldDecorator函数为高阶函数，
                        则在第二次调用的时候接受一个组件标签，就是包装的表单项
                        username：标识名称，匹配输入框的值
                        */}
                        {getFieldDecorator('username',{
                            rules:[{ required:true,message:'Please input your username!'}],
                            })(
                            <Input
                                prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                placeholder="Username"
                            />
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password',{
                            rules:[{ required:true,message:'Please input your password!'}],
                        })(
                            <Input
                                prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                type="password"
                                placeholder="Password"
                            />
                        )}

                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </section>
        </div>);
    }
}
/*1===》第一步
* 1. 高阶函数
*   create是高阶函数，因为它返回的是一个函数
* 2. 高阶组件
* */
//Form是对象，返回：是一个函数，该函数执行要接受一个组件，返回的是一个新组件
//包装Form组件（内部有Form标签的组件称为Form组件）生成一个新的组件：Form(Login)
//返回的新组件会向Form组件传递一个强大的对象属性：form
const WrapLogin = Form.create()(Login)
export default WrapLogin