React模拟后台项目（八）添加用户页面

一、添加用户页面 src/pages/user/usersCreate/index.js

// 导入库
import React, {Component} from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

// 导入组件
import { postUsersData } from '../store/actionCreators'
// 导入样式
import {
    UsersCreateDiv,
} from './style.js'
// UI  卡片，输入框，确认按钮
import { 
    Card,
    Input,
    // 确认按钮
    // Modal, 
    Button,
    // 表单
    Form, 
    
} from 'antd';


class UsersCreate extends Component{
    // Form表单
    layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
      };
    tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
      
    onFinish = values => {
        console.log('Success:', values);
        this.props.postUsersFn(values, ()=>{
            this.props.history.push('/admin/users')
        })
        // this.props.history.push('/admin/users')
    };
      
    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };    
    // 确认按钮
    state = { visible: false };

    showModal = () => {
        this.setState({
        visible: true,
        });
    };

    handleOk = e => {
        console.log(e);
        this.setState({
        visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
        visible: false,
        });
    };
    render(){      
        return(
            <UsersCreateDiv>
                {/* 添加用户  返回按钮 */}
                <Card title="添加用户" extra={
                    <Button 
                    type="dashed"
                    onClick={()=>{
                      window.history.back()
                    }}
                    >
                      返回
                    </Button>
                }>
                    <div style={{width: 500}}>
                        <Form
                        {...this.layout}
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        >
                        <Form.Item
                        label="Name"
                        name="username"
                        >
                        <Input/>
                        </Form.Item>
                        <Form.Item
                            label="Password"
                            name="password"
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                        label="Email"
                        name="email"              
                        >
                        <Input />
                        </Form.Item>
                        <Form.Item
                        label="Mobile"
                        name="Mobile"
                        >
                        <Input/>
                        </Form.Item>
                        {/* 确认添加按钮 */}
                        <Form.Item {...this.tailLayout}>
                            <Button type="primary" htmlType="submit">
                            确定
                            </Button>
                        </Form.Item>
                        </Form>
                        <div>
                    </div>
                    </div>
                </Card>
            </UsersCreateDiv>
        )
    }
}

const mapStateToProps = state => {
    return {}
}

const mapDispatchToProps = dispatch => {
    return {
        postUsersFn: (params, callback) => dispatch(postUsersData(params, callback))
    }
}
// 导出
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(UsersCreate))

二、添加用户页面 src/pages/user/usersCreate/style.js

import styled from 'styled-components'

export const UsersCreateDiv = styled.div`
    width: 100%;
    height: 100%;   
`