import React from 'react';
import ReactDOM from 'react-dom';
import './Tab.css'
class Tab extends React.Component{
    constructor(props){
        super(props)
        //设置状态、数据
        this.state = {
            c1:'content active',
            c2:"content"
        }
        this.clickEvent = this.clickEvent.bind(this)//绑定点击事件
    }
    clickEvent(e){
        console.log('clickEvent')
        console.log(e.target.dataset.index)
        let index = e.target.dataset.index;
        console.log(this)
        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}>内容一</button>
                <button data-index="2" onClick={this.clickEvent}>内容二</button>
                <div className={this.state.c1}>
                    <h1>内容1</h1>
                </div>
                <div className={this.state.c2}>
                    <h1>内容2</h1>
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <Tab />,
    document.querySelector('#root')
)