import React, { Component } from 'react';
class View extends Component {
constructor(props) {
super(props)
this.state = {
cur: 'block1',
username: "",
age: "",
context: "",
}
}
// 类名切换
classFn(cur) {
this.setState({
cur
})
}
block1Fn() {
this.classFn('block1')
}
block2Fn() {
this.classFn('block2')
}
block3Fn() {
this.classFn('block3')
}
block4Fn() {
this.classFn('block4')
}
block5Fn() {
this.classFn('block5')
}
//onChange绑定
onchangeFn(e) {
let name = e.target.name
let value = e.target.value
this.setState({
[name]: value
})
// console.log(e.target.value);
}
render() {
const { cur, username, age, context } = this.state
return (
<>
<div className={`box_halas ${cur}`}>
<h2 className="sp1">这是考试内容</h2>
<div className="halas_x">
{/* 模块一 */}
<div className="halas1">
<h2>一丶准备开始考试</h2><br />
<button className="btn1" onClick={() => { this.block2Fn() }}>开始考试</button>
</div>
{/* 模块二 */}
<div className="halas2">
<span>二丶开始考试</span><br />
姓名:<input className="inp1" type="username" name='username' value={username} placeholder="请输入姓名" onChange={(e) => { this.onchangeFn(e) }} /><br /><br />
班级:<input className="inp2" type="age" name="age" value={age} placeholder="请输入班级" onChange={(e) => { this.onchangeFn(e) }} /><br /><br />
考试内容:<input className="inp3" type="context" name="context" value={context} placeholder="请输入考试内容" onChange={(e) => { this.onchangeFn(e) }} /><br /><br />
<button className="btn2" onClick={() => { this.block3Fn() }}>准备上机</button>
</div>
{/* 模块三 */}
<div className="halas3">
<br />
姓名:{username}
<br /><br />
班级:{age}
<br /><br />
考试内容:{context}
<br /><br />
<h2>三丶上机了</h2>
<button className="btn1" onClick={() => { this.block4Fn() }}>完成上机</button>
</div>
{/* 模块四 */}
<div className="halas4">
<h2>四、我已完成所有考试,准备进入面试环节</h2><br />
<button className="btn1" onClick={() => { this.block5Fn() }}>准备面试</button>
</div>
{/* 模块五*/}
<div className="halas5">
<h2>五、坐等面试</h2><br />
<button className="btn1" onClick={() => { this.block1Fn() }}>返回首页</button>
</div>
</div>
</div>
</>
);
}
}
export default View;
Tab切换小例子
最新推荐文章于 2024-07-29 18:19:14 发布