ShangGuiGu---React---ZHIPIN(1)---静态页面

最新推荐文章于 2022-07-15 09:25:40 发布

Lion Of WU

最新推荐文章于 2022-07-15 09:25:40 发布

阅读量266

点赞数

分类专栏：项目制作文章标签： react 前端

本文链接：https://blog.csdn.net/NDSoumig/article/details/103949412

版权

项目制作专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介: 这是用react制作的硅谷直聘项目的静态页面，记录一下写静态页面的时候遇到的问题。
注意:
①state的两种写法和区别：
在组件的constructor中

constructor(props) {
    // 必须在这里通过super调用父类的constructor
    super(props);

    // 给state赋值，可以使用props
    this.state = {
    
    }
  }

使用prop来初始化state

直接在Class中定义

参考这篇文章:React基础11 React中初始化state的两种方法

②可控组件和非可控组件:
参考这篇文章:react之可控组件与不可控组件
③radio默认选择:checked属性

<input type='radio' name='userType' value='boss' onChange={this.typeChange} checked/>

④跳转用的代码：

toLogin=()=>{
        this.props.history.replace('./login')
    }
<button className='btn btn-lg btn-success btn-block' id='font20' onClick={this.toLogin}>已拥有用户</button>

代码:

registers.jsx:

/*
    注册路由组件
*/
import React,{Component} from 'react'
import Logo from '../../components/Logo/logo'
import Head from '../../components/Head/head'

// import {
//     WingBlank,
//     List,
//     InputItem,
//     WhiteSpace
//     // Button
//     } from 'antd-mobile'

// const ListItem = List.Item


export default class Register extends Component{
    state = {
        username: '',  // 用户名
        password: '',  // 密码
        password2: '',  // 确认密码
        usertype: 'boss' // 用户类型名称   dashen/laoban
    }

    userChange =(e) =>{
        // console.log(e.target.value)
        // let username = e.target.value
        this.setState({username: e.target.value}) //非可控组件
      
    }

    passChange =(e) =>{
        this.setState({password: e.target.value})
    }
    
    pass2Change =(e) =>{
        this.setState({password2: e.target.value})
    }
    
    typeChange =(e) =>{
        this.setState({usertype: e.target.value})
    }
    toLogin=()=>{
        this.props.history.replace('./login')
    }

    submit=() =>{
        console.log(this.state.username)
        console.log(this.state.password)
        console.log(this.state.password2)
        console.log(this.state.usertype)
    }

    render(){
        return(
            <div>
                <div><Head></Head></div>
                <div><Logo></Logo></div>
                <div className='container'>
                    {/* 
                        登录：Message
                        注册：Register
                        存放信息组件:
                        用户名、密码、确认密码、用户类型
                    */}
                   {/* <WingBlank>
                       <List>
                        <WhiteSpace/>
                        <InputItem>用户名:</InputItem>
                        <WhiteSpace/>
                        <InputItem type='password'>密码:</InputItem>
                       </List>
                   </WingBlank> */}
                    <div id='register'>
                        <div className='container'>
                            <div className='col-xs-2' id='font20'>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</div>
                            <div className='col-xs-3 marginTB'>
                                <input type='text' placeholder='请输入用户名' className='form-control' onChange={this.userChange}></input>
                            </div>
                        </div>

                        <div className='container'>
                            <div className='col-xs-2' id='font20'>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</div>
                            <div className='col-xs-3 marginTB'>
                                <input type='text' placeholder='请输入密码' className='form-control' onChange={this.passChange}></input>
                            </div>
                        </div>

                        <div className='container'>
                            <div className='col-xs-2' id='font20'>确认密码：</div>
                            <div className='col-xs-3 marginTB'>
                                <input type='text' placeholder='请输入密码' className='form-control' onChange={this.pass2Change}></input>
                            </div>
                        </div>

                        <div className='container'>
                            <div className='col-xs-2' id='font20'>用户类型：</div>
                            <div className='col-xs-3 marginTB' id='font20'>
                                <input type='radio' name='userType' value='boss' onChange={this.typeChange} checked/>老板
                                <input type='radio' name='userType' value='gen'  onChange={this.typeChange}/>大神
                                {/* <input type="radio" name="sex" value="male" />Male<br/>
                                <input type="radio" name="sex" value="female" />Female */}
                            </div>
                        </div>
                    </div>
                   
                </div>
                <div>
                    {/* 
                    
                    按钮组件：
                        注册页面==》注册、已拥有用户
                        登录页面==》登录、还没有用户

                    */}
                    <button className='btn btn-lg btn-success btn-block' id='font20' onClick={this.submit}>注册</button>
                    <button className='btn btn-lg btn-success btn-block' id='font20' onClick={this.toLogin}>已拥有用户</button>
                </div>
            </div>
        )
    }
}

login.jsx:

/*
    登录路由组件
*/
import React,{Component} from 'react'
import Logo from '../../components/Logo/logo'
import Head from '../../components/Head/head'
export default class Login extends Component{
    state = {
        username: '',  // 用户名
        password: ''  // 密码
      }
      userChange =(e) =>{
        // console.log(e.target.value)
        // let username = e.target.value
        this.setState({username: e.target.value}) //非可控组件
      
    }

    passChange =(e) =>{
        this.setState({password: e.target.value})
    }
    toRegister=()=>{
        this.props.history.replace('./register')
    }
    submit=() =>{
        console.log(this.state.username)
        console.log(this.state.password)
    }

    render(){
        return(
            <div>
                <div><Head></Head></div>
                <div><Logo></Logo></div>
                <div className='container'>
                    {/* 
                        登录：Message
                        注册：Register
                        存放信息组件:
                        用户名、密码、确认密码、用户类型
                    */}
                   {/* <WingBlank>
                       <List>
                        <WhiteSpace/>
                        <InputItem>用户名:</InputItem>
                        <WhiteSpace/>
                        <InputItem type='password'>密码:</InputItem>
                       </List>
                   </WingBlank> */}
                    <div id='register'>
                        <div className='container'>
                            <div className='col-xs-2' id='font20'>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</div>
                            <div className='col-xs-3 marginTB'>
                                <input type='text' placeholder='请输入用户名' className='form-control' onChange={this.userChange}></input>
                            </div>
                        </div>

                        <div className='container'>
                            <div className='col-xs-2' id='font20'>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</div>
                            <div className='col-xs-3 marginTB'>
                                <input type='text' placeholder='请输入密码' className='form-control' onChange={this.passChange}></input>
                            </div>
                        </div>

                        
                    </div>
                   
                </div>
                <div>
                    {/* 
                    
                    按钮组件：
                        注册页面==》注册、已拥有用户
                        登录页面==》登录、还没有用户

                    */}
                    <button className='btn btn-lg btn-success btn-block' id='font20' onClick={this.submit}>登录</button>
                    <button className='btn btn-lg btn-success btn-block' id='font20' onClick={this.toRegister}>还没有用户</button>
                </div>
            </div>
        )
    }
}

修改index.html

因为是移动端的项目，所以要修改入口html
在这里插入图片描述
用fastclick.js来处理移动端点击延迟的问题

实现组件的按需打包

下载依赖模块
npm install --save-dev babel-plugin-import react-app-rewired
定义加载配置的JS模块:config-overrides.js
在根目录下创建一个js文件,写入以下代码：

const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
	config = injectBabelPlugin(['import', {libraryName: 'antd-mobile', style: 'css'}],config);
return config;
}

创建路由组件

因为路由组件一般都会和redux交互，所以创建在containers里面。
在这里插入图片描述
只显示其中的某一个用switch,显示多个用Route
路由注意的地方，路由由HashRouter,Switch,Route组成。Main是默认组件。

Index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import {HashRouter,Route,Switch} from 'react-router-dom'
import Register from './containers/Registers/registers'
import Login from './containers/Login/login'
import Main from './containers/Main/main'
ReactDOM.render(
    //只显示其中的某一个用switch,显示多个用Route
    <HashRouter>
        <Switch>
            <Route path="/register" component={Register}/>
            <Route path="/login" component={Login}/>
            <Route component={Main}></Route> 
      </Switch>
    </HashRouter>
    ,document.getElementById("root"));