Tab切换小例子

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;