简单的实现页面点击切换（非路由方式）

Posted 2021-08-31 老张在线敲代码

//html
import React, { Component } from "react";

class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      curr: "zero",
      username: "",
      password: "",
      info: localStorage.getItem("info"),
    };
  }
  //页面跳转
  changeClass(curr) {
    this.setState({
      curr,
    });
  }
  //表单页面保存
  handleCun() {
    const { username, password } = this.state;
    localStorage.setItem("info", username);
    this.changeClass("second");
    this.setState({
    	info: localStorage.getItem("info"),
    })
  }
  //表单页面取消
  handleQu() {
    localStorage.clear();
    this.changeClass("zero");
  }
  //赋值
  handleChange(e) {
    let name = e.target.name;
    let value = e.target.value;
    this.setState({
      [name]: value,
    });
    console.log(e.target.value);
  }
  //创建简历
  handleBao() {
    this.changeClass("first");
  }
  //表单页面确认提交信息
  handleQueren() {
    this.changeClass("third");
  }
  //返回第一页
  Fan() {
    this.changeClass("zero");
  }
  //修改表单
  handleXiu() {
    this.changeClass("first");
  }
  render() {
    const { username, password, curr, info } = this.state;
    return (
      <div>
        <div className={`box ${curr}`}>
          <div className="cont1">
            <h2>模块一</h2>
            <button
              type="button"
              onClick={() => {
                this.handleBao();
              }}
            >
              我要创建简历
            </button>
          </div>
          <div className="cont2">
            <h2>模块二</h2>
            <input
              type="text"
              placeholder="请输入帐号"
              name="username"
              value={username}
              onChange={(e) => this.handleChange(e)}
            />
            <input
              type="password"
              placeholder="请输入密码"
              name="password"
              value={password}
              onChange={(e) => this.handleChange(e)}
            />
            <button
              type="button"
              onClick={() => {
                this.handleCun();
              }}
            >
              保存
            </button>
            <button
              type="button"
              onClick={() => {
                this.handleQu();
              }}
            >
              取消
            </button>
          </div>
          <div className="cont3">
            <h2>模块三</h2>
            {info}
            <button
              onClick={() => {
                this.handleXiu();
              }}
            >
              修改
            </button>
            <button
              onClick={() => {
                this.handleQueren();
              }}
            >
              确认
            </button>
          </div>
          <div className="cont4">
            <h2>模块四</h2>
            <p>创建成功</p>
            <button
              type="button"
              onClick={() => {
                this.Fan();
              }}
            >
              返回
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default index;

//css
.box {
  h2 {
    font-size: 30px;
    font-weight: 800;
  }
  .cont1 {
    display: none;
  }
  .cont2 {
    display: none;
  }
  .cont3 {
    display: none;
  }
  .cont4 {
    display: none;
  }
  &.zero .cont1 {
    display: block;
  }
  &.first .cont2 {
    display: block;
  }
  &.second .cont3 {
    display: block;
  }
  &.third .cont4 {
    display: block;
  }
}