zoukankan      html  css  js  c++  java
  • 购物车结合单页web应用

    reg.js中

    import React, { Component } from "react"
    class Reg extends Component{
        render(){
            return(
                <div>
                    <ul>
                        <li><label>用户名:</label><input /></li>
                        <li><label>密码:</label><input /></li>
                        <li><label>邮箱:</label><input /></li>
                        <li><label>手机:</label><input /></li>
                        <li><button>注册</button></li>
                        <li><button onClick={this.toLogin.bind(this)}>前往登录</button></li>
                    </ul>
                </div>
            )
        }
        // controller
        toLogin(){
            this.props.history.push("/login")
        }
    }
    export default Reg;

    login.js文件中

    import React, { Component } from "react"
    import { Link } from 'react-router-dom';
    class Login extends Component{
        render(){
            return(
                <div>
                    <ul>
                        <li><label>用户名:</label><input /></li>
                        <li><label>密码:</label><input /></li>
                        <li><button onClick={this.toMain.bind(this)}>登录</button></li>
                        <li><Link to="/reg">前往注册</Link></li>
                        {/* <li><button  onClick={this.toReg.bind(this)}>前往注册</button></li> */}
                    </ul>
                </div>
            )
        }
        // controller
        toMain(){
            this.props.history.push("/main")
        }
        toReg(){
            this.props.history.push("/reg")
        }
    }
    export default Login;

    main.js中

    import React, { Component } from "react"
    import Quest from './quest/stwo'
    import Goods from './shop/shopT';
    import { HashRouter as Router, Route,Link } from 'react-router-dom';
    class Main extends Component{
        render(){
            return(
                <div>
                    <div>
                        <ul>
                            <li><Link to="/main/a1">满减</Link></li>
                            <li><Link to="/main/a2">五折</Link></li>
                        </ul>
                    </div>
                    <Router>
                        <div>
                            <Route path='/main/a1' component={Quest} />
                            <Route path='/main/a2' component={Goods} />
                        </div>
                    </Router>
                </div>
            )
        }
    }
    export default Main;

    index.js中

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Main from './main';
    import Reg from './reg';
    import Login from './login';
    import {
        HashRouter as Router,
        Route
    } from 'react-router-dom';
    // 登陆注册
    ReactDOM.render((
        <Router>
            <div>
                <Route path='/reg' component={Reg} />
                <Route path='/login' component={Login} />
                <Route path='/main' component={Main} />
            </div>
        </Router>
    ), document.getElementById('root'));
  • 相关阅读:
    C#实现-浏览器UA解析获得手机、系统、浏览器等信息
    C#代码实现-冒泡排序
    C# DateTime 工具类
    net core 3.1 跨域 Cors 找不到 “Access-Control-Allow-Origin”
    C#/.Net开发入门篇(3)——console类的输入输出
    C#/.Net开发入门篇(2)——第一个控制台应用程序
    C#/.Net开发入门篇(1)——开发工具安装
    docker 学习笔记(2)--docker file命令
    docker 学习笔记(1)--常用命令
    导出大数据方法。批量导BOM
  • 原文地址:https://www.cnblogs.com/cj-18/p/9378979.html
Copyright © 2011-2022 走看看