react简单实现模块跳转

import React,{Component} from 'react';
class View extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cls: 'parent_one',
            name: '',
            age: '',
            cla:''
    }
  }
  changeCls(cls) {
        this.setState({
            cls: cls
        })
  }
   One() {
        this.changeCls('parent_two')
  }
   Two() {
            this.changeCls('parent_thre')

  }
   Thre() {
        this.changeCls('parent_four')
  }
   four() {
        this.changeCls('parent_five')
    }
      five() {
        this.changeCls('parent_one')
    }
     setValue(e) {
        let value = e.target.value;
        let name = e.target.name;
        this.setState({
            [name]: value ,
        })
    }
  render() {
        const { cls, name, age,cla } = this.state
    return (
      <React.Fragment>
        <div className={`show_hide ${cls}`}>
          {/* 块一 */}
          <div className='one'>
            <h1>准备开始驾考考试</h1>
              <p className='p' onClick={() => { this.One() }}>开始考试</p>
          </div>
          {/* 块二 */}
            <div className='two'>
              <h1>二、开始考试</h1>
            姓名：<input type="text" name='name' value={name} onChange={(e) => { this.setValue(e) }} placeholder='用户名' />
            <br />
            年龄： <input type="text" name='age' value={age} onChange={(e) => { this.setValue(e) }} placeholder='年龄' />
            <br />
           科目：<input type="text" name='cla' value={cla} onChange={(e) => { this.setValue(e) }} placeholder='内容' />    
                  <p onClick={() => { this.Two() }} className='sp1'>准备上机</p>
          </div>
           {/* 块三 */}
           <div className='thre'>
                    <h1>三、上机了</h1>
                    <div>名字：{name}</div>
              <div>年龄：{age}</div>
              <div>内容：{cla}</div>
                        <p onClick={() => { this.Thre() }} className='sp1'>完成上机</p>
                    </div>
            {/* 块四 */}
                <div className='four'>
                    <h1>四、我已完成机试，准备道路驾驶</h1>
                    <p onClick={() => { this.four() }} className='sp'>准备面试</p>
                </div>
          {/* 块五 */}
          <div className='five'>
            <h1>五、等待驾驶</h1>
              <p className="sp" onClick={()=>{this.five()}}>返回首页</p>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default View;

.show_hide {
	width: 900px;
	margin: 0 auto;
	text-align: center;
	.one {
		width: 900px;
		height: 400px;
		display: none;
		border: 1px solid black;
		h1 {
			font-size: 28px;
		}
		.p {
			width: 200px;
			height: 60px;
			background: rgb(36, 179, 204);
			color: white;
			margin: 0 auto;
			margin-top: 200px;
			font-size: 34px;
		}
	}
	.two {
		width: 900px;
		display: none;
		height: 400px;
		border: 1px solid black;
		h1 {
			font-size: 28px;
		}
		input {
			margin: 10px 0;
		}
		span {
			display: inline-block;
		}
		.sp1 {
			width: 240px;
			height: 60px;
			background: rgb(36, 179, 204);
			color: white;
			margin: 0 auto;
			margin-top: 100px;
			font-size: 34px;
		}
		.sp2 {
			width: 30px;
			height: 20px;
			background: skyblue;
			color: white;
		}
	}
	.thre {
		width: 900px;
		height: 400px;
		border: 1px solid black;
		display: none;
		h1 {
			font-size: 28px;
		}
		.sp1 {
			width: 240px;
			height: 60px;
			background: rgb(36, 179, 204);
			color: white;
			margin: 0 auto;
			margin-top: 100px;
			font-size: 34px;
		}
		.sp2 {
			width: 30px;
			height: 20px;
			background: skyblue;
			color: white;
		}
	}
	.four {
		width: 900px;
		height: 400px;
		border: 1px solid black;
		display: none;
		h1 {
			font-size: 28px;
		}
		.sp {
			width: 240px;
			height: 60px;
			background: rgb(36, 179, 204);
			color: white;
			margin: 0 auto;
			margin-top: 100px;
			font-size: 34px;
		}
	}
	.five {
		width: 900px;
		height: 400px;
		border: 1px solid black;
		display: none;
		h1 {
			font-size: 28px;
		}
		.sp {
			width: 240px;
			height: 60px;
			background: rgb(36, 179, 204);
			color: white;
			margin: 0 auto;
			margin-top: 100px;
			font-size: 34px;
		}
	}
	&.parent_one {
		.one {
			display: block;
		}
	}
	&.parent_two {
		.two {
			display: block;
		}
	}
	&.parent_thre {
		.thre {
			display: block;
		}
	}
	&.parent_four {
		.four {
			display: block;
		}
	}
	&.parent_five {
		.five {
			display: block;
		}
	}
}

scss语法编写