React 进阶之路 五 ( 事件 与 state )

# 目标

无标题.png

如图：实现点击 button1 显示 内容一 隐藏 内容二，反之 显示内容二 隐藏内容 一

# 上代码

1. 先写出大体框架

class Tab extends React.Component{
    constructor(props){
        super(props)
    }
    // 渲染组件
    render(){
        return <React.StrictMode>
            <button >button1</button>
            <button >button2</button>

            <h1>我是内容一</h1>
            <h1>我是内容二</h1>
        </React.StrictMode>
    }
}

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

2. 定义一个 button 点击事件

class Tab extends React.Component{
    // 定义 点击事件
    btnClick(e){
        console.log('我被点击了', e)
    }
    // 渲染组件
    render(){
        return <React.StrictMode>
            <button onClick={this.btnClick}>button1</button>
            <button onClick={this.btnClick}>button2</button>

            <h1>我是内容一</h1>
            <h1>我是内容二</h1>
        </React.StrictMode>
    }
}

3. 区分是哪个 button 点击了

class Tab extends React.Component{
    // 定义 点击事件
    btnClick(e){
        console.log('我点击了: ', e.target.dataset.index)
    }
    // 渲染组件
    render(){
        return <React.StrictMode>
            <button data-index='1' onClick={this.btnClick}>button1</button>
            <button data-index='2' onClick={this.btnClick}>button2</button>

            <h1>我是内容一</h1>
            <h1>我是内容二</h1>
        </React.StrictMode>
    }
}

4. 定义一个状态 state 用于存放数据

class Tab extends React.Component{
    constructor(props){
        super(props)
        //状态 ==》 相当于 vue 的 state
        this.state = {
            show1:{display: 'block'},
            show2:{display: 'block'}
        }
    }
}

5. 把状态 state 数据应用在元素上

class Tab extends React.Component{
    constructor(props){
        super(props)
        //状态 ==》 相当于 vue 的 state
        this.state = {
            show1:{display: 'block'},
            show2:{display: 'block'}
        }
    }

    // 渲染组件
    render(){
        return <React.StrictMode>
            <button data-index='1' onClick={this.btnClick}>button1</button>
            <button data-index='2' onClick={this.btnClick}>button2</button>

            <h1 style={this.state.show1}>我是内容一</h1>
            <h1 style={this.state.show2}>我是内容二</h1>
        </React.StrictMode>
    }
}

6. 处理 button click 事件，根据点击的 button 不同显示不同的内容

class Tab extends React.Component{
    // 定义 点击事件
    btnClick(e){
       if(e.target.dataset.index == '1'){
            this.setState({
                show1:{display: 'block'},
                show2:{display: 'none'}
            })
        }else{
            this.setState({
                show1:{display: 'none'},
                show2:{display: 'block'}
            })
        }
    }
    // 渲染组件
    render(){
        return <React.StrictMode>
            <button data-index='1' onClick={this.btnClick}>button1</button>
            <button data-index='2' onClick={this.btnClick}>button2</button>

            <h1 style={this.state.show1}>我是内容一</h1>
            <h1 style={this.state.show2}>我是内容二</h1>
        </React.StrictMode>
    }
}

发现这时报错了，button 里的 this 找不到了，需要在构造函数里绑定 this 指向

constructor(props){
  super(props)
    //状态 ==》 相当于 vue 的 state
    this.state = {
      show1:{display: 'block'},
      show2:{display: 'block'}
    }
    // 重新定义 this 指向
    this.btnClick = this.btnClick.bind(this);
 }

运行看看吧小伙伴~~~ 记得点赞哦