使用React做个简单的页面-01

1.页面效果

   

2.项目结构

   

具体代码

    root.js

    

pc_index.js

    

pc_header.js

  

移动端代码调整

   

页脚页面

    1.页面效果

代码实现

    

   pc_index.js

   

注册模块开发

   1.页面效果

 

代码实现

     

移动端效果；

代码实现

  

import React from 'react';

import { Row, Col} from 'antd';

import {

     Menu,

     Icon,

     Tabs,

     message,

     Form,

     Input,

     Button,

     CheckBox,

     Modal

} from 'antd';

const FormItem = Form. Item;

const SubMenu = Menu. SubMenu;

const TabPane = Tabs. TabPane;

const MenuItemGroup = Menu. ItemGroup;

class MobileHeader extends React. Component {

     constructor() {

         super();

         this. state = {

             current: 'top',

             modalVisible: false,

             action: 'login',

             hasLogined: false,

             userNickName: '',

             userid: 0

        };

    };

     setModalVisible( value)

    {

         this. setState({ modalVisible: value});

    };

     handleClick( e) {

         if ( e. key = "register") {

             this. setState({ current: 'register'});

             this. setModalVisible( true);

        } else {

            {

                 this. setState({ current: e. key});

            }

        }

    };

     handleSubmit( e)

    {

         //页面开始向 API 进行提交数据

         e. preventDefault();

         var myFetchOptions = {

             method: 'GET'

        };

         var formData= this. props. form. getFieldsValue();

         console. log( formData);

         fetch( "http://newsapi.gugujiankong.com/Handler.ashx?action=register&username=userName&password=password&r_userName="+ formData. r_userName+ "&r_password="+ formData. r_password+ "&r_confirmPassword="+ formData. r_confirmPassword, myFetchOptions).

         then( response => response. json()). then( json =>{

             this. setState({ userNickName:json. NickUserName, userid:json. UserId});

        });

         message. success( "请求成功！");

         this. setModalVisible( false);

    };

     login(){

         this. setModalVisible( true);

    };

     render() {

         let { getFieldProps} = this. props. form;

         const userShow = this. state. hasLogined ?

         < Link >

             < Icon type= "inbox" />

         </ Link >

        :

         < Icon type= "setting" onClick= {this. login. bind( this) } />

         return (

< div id= "mobileheader" >

< header >

< img src= "./src/images/logo.png" alt= "logo" />

< span >ReactNews </ span >

                     { userShow }

</ header >

                 < Modal title= "用户中心" wrapClassName= "vertical-center-modal" visible= {this. state. modalVisible } onCancel= { () =>this. setModalVisible( false) } onOk= { () => this. setModalVisible( false) } okText = "关闭" >

                     < Tabs type= "card" >

                         < TabPane tab= "注册" key= "2" >

                             < Form horizontal onSubmit= {this. handleSubmit. bind( this) } >

                                 < FormItem label= "账户" >

                                     < Input placeholder= "请输入您的账号" { ... getFieldProps( 'r_userName') } />