界面切换的实现方法

界面切换其实非常简单！！首先我们需要了解到界面切换的思路才可以实现界面自动切换的效果。

思路：

1）用html+css来搭建所需的页面

2）用css进行样式的完善，并实现改变具体显示状态

3）通过修改或增加对应的className来实现手动的页面切换

4）将对应的classname通过state单独提出来

5）通过修改state默认值进行理想版块的显示隐藏

6）增加setState方法，用该方法设置classname，来改变布局

7）通过点击事件来切换对应的classname

思路理清了，让我们来看看具体怎么实现的吧！！！！！

import React, { Component } from 'react'
class View extends Component{
  constructor(props) {
    super(props)
    this.state = {
      cls: 'parent_model',
      uname: '',
      age:''
    }
  }
  changeCls(cls) {
    this.setState({
      cls:cls
    })
  }
  setUnameValue(e) {
    let value = e.target.value;
    this.setState({
      uname:value
    })
  }
  setAgeValue(e) {
    let value = e.target.value;
    this.setState({
      age:value
    })
  }
  render() {
    const {cls,uname,age} = this.state
    return (
      <React.Fragment>
        <div className={`hide_show ${cls}`}>
          {/* 模块一 */}
          {/* 
          要求：
          第一个模块优先展示
          内容为：
          1、标题：模块一
          2、有一个按钮（我要创建简历）
          点击按钮进入第二个模块
          */}
          <div className="model">
            <h3>模块一</h3>
            <button onClick={() => {this.changeCls('parent_model1')}}>我要创建简历</button>
          </div>
          {/* 模块二 */}
          {/* 
          要求：
          内容：
          一个用户表单：姓名、年龄
          两个按钮分别如下：
          保存（按钮）、取消（按钮）
          点击保存 进入模块三
          点击取消 回到模块一
           */}
          <div className="model1">
            <label>姓名：</label>
            <input value={uname} type="text" onChange={(e) => { this.setUnameValue(e) }} placeholder="用户名" /><br/>
            <label>年龄：</label>
            <input type="input" value={age} onChange={(e) => {this.setAgeValue(e)}} placeholder="年龄" /><br/>
            <button onClick={() => {this.changeCls('parent_model2')}}>保存</button>
            <button onClick={() =>{this.changeCls('parent_model')}}>取消</button>
          </div>
          {/* 模块三 */}
          {/* 
          内容：
          显示上一模块的姓名、年龄
          两个按钮分别如下：修改、确认
          点击修改回到模块二
          点击确认直接切到模块四
           */}
          <div className="model2">
            <div>{uname}</div>
            <div>{age}</div>
            <button onClick={() => {this.changeCls('parent_model1')}}>修改</button>
            <button onClick={() => {this.changeCls('parent_model3')}}>确认</button>
          </div>
          {/* 模块四 */}
          {/* 
          内容：
          标题：创建成功
          按钮：返回模块一
           */}
          <div className="model3">
            <h3>创建完成</h3>
            <button onClick={() => {this.changeCls('parent_model')}}>返回模块一</button>
          </div>
        </div>
      </React.Fragment>
    )
  }
}
export default View;

css样式：

.hide_show {
	width: 600px;
	margin: 0 auto;
	.model {
		width: 400px;
		height: 200px;
		border: 1px solid orange;
		text-align: center;
		margin-top: 10px;
		display: none;
		button {
			width: 166px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			margin: 10px 10px;
			background: #f60;
			color: #fff;
			border: none;
			border-radius: 5px;
		}
	}
	.model1 {
		width: 400px;
		height: 200px;
		border: 1px solid red;
		margin-top: 10px;
		display: none;
		input {
			width: 200px;
			height: 32px;
			border-radius: 5px;
			padding-left: 6px;
			margin: 10px 10px;
		}
		button {
			width: 66px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			margin: 10px 10px;
			background: #f60;
			color: #fff;
			border: none;
			border-radius: 5px;
		}
	}
	.model2 {
		width: 400px;
		height: 200px;
		border: 1px solid blue;
		margin-top: 10px;
		display: none;
		button {
			width: 66px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			margin: 10px 10px;
			background: #f60;
			color: #fff;
			border: none;
			border-radius: 5px;
		}
	}
	.model3 {
		width: 400px;
		height: 200px;
		border: 1px solid green;
		margin-top: 10px;
		display: none;
		text-align: center;
		button {
			width: 166px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			margin: 10px 10px;
			background: #f60;
			color: #fff;
			border: none;
			border-radius: 5px;
		}
	}
	&.parent_model {
		.model {
			display: block;
		}
	}
	&.parent_model1 {
		.model1 {
			display: block;
		}
	}
	&.parent_model2 {
		.model2 {
			display: block;
		}
	}
	&.parent_model3 {
		.model3 {
			display: block;
		}
	}
}