码迷,mamicode.com
首页 > Web开发 > 详细

购物车结合单页web应用

时间:2018-07-27 19:16:11      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:文件中   efault   用户名   one   登陆   tor   input   结合   hash   

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‘));

 

购物车结合单页web应用

标签:文件中   efault   用户名   one   登陆   tor   input   结合   hash   

原文地址:https://www.cnblogs.com/cj-18/p/9378979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!