前端学习（2228）：react之状态三

index.js 

import React from 'react';
import ReactDOM from 'react-dom';

import './App.css'


class Tab extends React.Component {
    constructor(props) {
        super(props)
            //状态 时间

        this.state = {
            c2: "content",
            c1: "content active"
        }
        this.clickEvent = this.clickEvent.bind(this)

    }
    clickEvent(e) {
        console.log('clickEvent')
        console.log(e)
        console.log(e.targrt.dataset.index)
        let index = e.targrt.dataset.index
        if (index == '1') {
            this.setState({
                c1: "content active",
                c2: "content"
            })
        } else {
            this.setState({
                c1: "content ",
                c2: "content active"
            })
        }

    }
    render() {
            return ( <
                div >

                <
                button data - index = "1"
                onClick = { this.clickEvent } > 内容1 < /button>  <
                button data - index = "2"
                onClick = { this.clickEvent } > 内容2 < /button> <
                div className = { this.state.c1 } >
                <
                h1 > 内容1 < /h1> < /
                div > <
                div className = { this.state.c2 } >
                <
                h1 > 内容2 < /h1> < /
                div > <
                /
                div >

            )

        }
        /* 生命周期函数 */

}




//console.log("这是渲染函数")
ReactDOM.render( < Tab / > , document.querySelector("#root"))

App.css

.content {
    display: none
}

.content .active {
    display: block
}