react____tab点击切换状态的实现

// 实现思路：点击谁就把谁的type属性交给state中的active

完整代码
import './index.css'
import avatar from './images/avatar.png'
import React from 'react'

// 时间格式化
function formatDate (time) {
  return `${time.getFullYear()}-${time.getMonth()}-${time.getDate()}`
}

class App extends React.Component {
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot'
      },
      {
        id: 2,
        name: '时间',
        type: 'time'
      }
    ],
    active: 'hot',   //控制tab激活的关键状态
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '哎哟，不错哦',
        time: new Date('2021-10-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0
      },
      {
        id: 3,
        author: '五月天',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-10-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1
      }
    ]
  }
  // 声明一个回调函数  tab切换回调
  switchTab = (type) => {
    console.log('切换', type)
    // 实现思路：点击谁就把谁的type属性交给state中的active
    this.setState({
      active: type
    })
  }

  render () {
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>5 评论</span>
          </div>
          {/* 排序 */}
          <div className="tabs-order">
            <ul className="sort-container">
              {
                this.state.tabs.map(tab => (
                  // 是否有on表示当前状态是否是激活的  
                  <li
                    onClick={() => this.switchTab(tab.type)}
                    key={tab.id}
                    className={tab.type === this.state.active ? 'on' : ''}
                  >按{tab.name}排序</li>
                ))
              }
            </ul>
          </div>

          {/* 添加评论 */}
          <div className="comment-send">
            <div className="user-face">
              <img className="user-head" src={avatar} alt="" />
            </div>
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
              />
              <button className="comment-submit">发表评论</button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>

          {/* 评论列表 */}
          <div className="comment-list">
            {
              this.state.list.map(item => (
                <div className="list-item" key={item.id}>
                  <div className="user-face">
                    <img className="user-head" src={avatar} alt="" />
                  </div>
                  <div className="comment">
                    <div className="user">{item.author}</div>
                    <p className="text">{item.comment}</p>
                    <div className="info">
                      <span className="time">{formatDate(item.time)}</span>
                      <span className={item.attitude === 1 ? 'like liked' : 'like'}>
                        <i className="icon" />
                      </span>
                      <span className={item.attitude === -1 ? 'hate hated' : 'hate'}>
                        <i className="icon" />
                      </span>
                      <span className="reply btn-hover">删除</span>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>)
  }
}


export default App

核心代码

state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot'
      },
      {
        id: 2,
        name: '时间',
        type: 'time'
      }
    ],
    active: 'hot',   //控制tab激活的关键状态

  // 声明一个回调函数  tab切换回调
  switchTab = (type) => {
    console.log('切换', type)
    // 实现思路：点击谁就把谁的type属性交给state中的active
    this.setState({
      active: type
    })
  }

 {/* 排序 */}
          <div className="tabs-order">
            <ul className="sort-container">
              {
                this.state.tabs.map(tab => (
                  // 是否有on表示当前状态是否是激活的  
                  <li
                    onClick={() => this.switchTab(tab.type)}
                    key={tab.id}
                    className={tab.type === this.state.active ? 'on' : ''}
                  >按{tab.name}排序</li>
                ))
              }
            </ul>
          </div>

实现思路： 记录当前点击项 上面的代码在 active:"hot"中记录点击项
2） 通过动态类名的控制 classNmae={tab.type===this.state.active?"on":""} 比对当前项目的tab值和记录下来的tab值是否相等
3） 如果相等就有资格获取on 这样就会有一个激活的状态 同一个时间下只有一个会被激活

首先设置active:hot 这是一个初始化的状态
之后使用点击事件传入type 就是点击时需要改变的数据
在react中的点击事件通过 this.setState({}) // 进行状态的改变 同时需要css的样式可以看出来效果