React-类组件事件

Tab组件的功能：通过点击按钮，切换不同的tab

1. 在lTab组件中定义了clickEvent方法，但是需要注意的是，需要注意this的指向问题，需要在构造函数中修改this指向，this.clickEvent = this.clickEvent.bind(this)
2. 两个按键同时绑定clickEvent事件，需要在button标签添加属性进行辨别，通过data-xxx=‘xxx’来进行辨别，在clickEvent中，通过e.target.dataset.xxx可以获取到data-xxx的值
3. 需要注意，一定要通过this.setState()修改state的数据
4. 如果已经学习过小程序，会发现，小程序开发和React有一定的相似度

.c1 {
  display: block;
}

.c2 {
  display: none;
}

import React from "react"
import ReactDOM from "react-dom"
import './index.css'


// 组件功能：通过点击按钮，切换不同的tab
class Tab extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            class1: 'c1',
            class2: 'c2'
        }
        this.clickEvent = this.clickEvent.bind(this)
    }
    // 定义点击事件
    clickEvent (e) {
        console.log('e.target.dataset.index=' + e.target.dataset.index)
        if (e.target.dataset.index === '1') {
            this.setState({
                class1: 'c1',
                class2: 'c2'
            })
        } else {
            this.setState({
                class1: 'c2',
                class2: 'c1'
            })
        }
    }
    // 渲染函数
    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.class1}>内容1</div>
                <div className={this.state.class2}>内容2</div>
            </div>
        )
    }
}


ReactDOM.render(
    <Tab />,
    document.getElementById('root')
)