React-----组件和jsx小案例

•  tab切换
• 删除评论
• 添加评论
• 点赞和踩

import React, { Component } from 'react'
import "../../assets/index.css";
import tx from "../../assets/images/avatar.png";
var moment = require("moment");
export default class Index extends Component {
     state = {
        text:null,
        // hot: 热度排序  time: 时间排序
        tabs: [
          {
            id: 1,
            name: "热度",
            type: "hot",
          },
          {
            id: 2,
            name: "时间",
            type: "time",
          },
        ],
        active: "hot",
        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
      changeTab = (type) => {
        this.setState({
            active:type
        })
      }
    //   删除评论
      deleteById=(id)=>{
        this.setState({
            list:this.state.list.filter(item=>item.id!==id)
        })
      }
    //   评论内容变化
      handleChangeText=(e)=>{
        this.setState({
            text:e.target.value
        })
      }
    //   发布评论
      handlerSubmit=()=>{
        const obj=  {
            id: 4,
            author: "五月天",
            comment:this.state.text,
            time: new Date(),
            // 1: 点赞 0：无态度 -1:踩
            attitude: 0,
          }
       this.setState({
        list:[...this.state.list,obj],
         text:''
       })
      }
    //   点赞和踩
      handlerAttitude=(id,att)=>{
        this.setState({
            list:this.state.list.map(item=>{
                if(item.id===id){
                    return {
                        ...item,attitude:att
                    }
                }else{
                    return item
                }
            })
        })
      }
  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">
              {/* <li className="on">按热度排序</li>
              <li>按时间排序</li> */}
              {this.state.tabs.map((item) => {
                return (
                  <li  onClick={() => this.changeTab(item.type)} key={item.id} className={item.type === this.state.active ? "on" : ""}>
                    按{item.name}排序
                  </li>
                );
              })}
            </ul>
          </div>
    
          {/* 添加评论 */}
          <div className="comment-send">
            <div className="user-face">
              <img className="user-head" src="./images/avatar.png" alt="" />
            </div>
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                value={this.state.text}
                onChange={this.handleChangeText}
                placeholder="发条友善的评论"
                className="ipt-txt"
              />
              <button className="comment-submit" onClick={this.handlerSubmit}>发表评论</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) => {
              return (
                <div className="list-item" key={this.state.list.id}>
                  <div className="user-face">
                    <img className="user-head" src={tx} alt="" />
                  </div>
                  <div className="comment">
                    <div className="user">{item.author}</div>
                    <p className="text">{item.comment}</p>
                    <div className="info">
                      <span className="time">
                        {moment(item.time).format("YYYY-MM-DD HH:mm:ss")}
                      </span>
                      <span onClick={()=>{this.handlerAttitude(item.id,item.attitude===1?0:1)}} className={item.attitude === 1 ? "like liked" : "like"}>
                        <i  className="icon" />
                      </span>
                      <span
                        onClick={()=>{this.handlerAttitude(item.id,item.attitude===-1?0:-1)}}
                        className={item.attitude === -1 ? "hate hated" : "hate"}
                      >
                        <i className="icon" />
                      </span>
                      <span className="reply btn-hover" onClick={()=>this.deleteById(item.id)}>删除</span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    )
  }
}