实现功能
1、渲染评论列表
2、删除评论
3、渲染导航栏和高亮
4、评论列表排序功能
5、获取评论
6、点击发布按钮发布评论
7、清空输入框
8、重新聚焦
实现代码
1、需要引入
import React, { useRef, useState } from 'react'
import avatar from "../logo.png" //头像
import "./css/index.css" //样式
2、样式----[./css/index.css]
* {margin: 0;padding: 0;
}.comment-box {width: 1000px;margin: 20px auto;height: 200px;
}/* 导航栏 */
.comment-tabs {display: flex;align-items: end;font-weight: normal;margin-bottom: 20px;
}.tabs-left {margin-right: 20px;font-size: 14px;
}.tabs-left p span {margin-left: 6px;color: #666;font-size: 10px;
}.tabs-right {display: flex;color: #666;font-size: 10px;
}.tabs-right .active {color: #08a17d;font-weight: 500;
}.tabs-right div span {display: inline-block;margin: 0 6px;height: 6px;border-left: 1px solid #666;
}.tabs-right div:last-child span {border: none;
}/* 发表评论 */
.comment-send {display: flex;align-items: center;justify-content: space-between;height: 40px;
}.avatar {width: 35px;height: 35px;margin-left: 10px;overflow: hidden;border-radius: 35px;border: 1px solid #08a17d;
}.avatar img {width: 100%;height: 100%;
}.comment-send .content {flex: 1;margin: 0 10px;padding: 0 10px;height: 100%;line-height: 40px;border: none;background: #eee;border-radius: 4px;border: 1px solid #eee;
}.comment-send .content:hover {background: none;
}.comment-send .button {width: 80px;height: 100%;color: #fff;text-align: center;line-height: 40px;background: #08a17d;border-radius: 4px;
}.comment-send .button:hover {cursor: pointer;
}/* 评论列表 */
.comment-list {margin-top: 20px;
}.comment-item {display: flex;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 1px solid #eee;
}.comment-item .right {flex: 1;margin-left: 10px;font-size: 10px;color: #666;line-height: 20px;
}.comment-item .right .content {color: #000;font-weight: 500;font-size: 12px;
}.comment-item .right .like {margin: 0 10px;
}.comment-item .right .delete:hover {cursor: pointer;
}
3、数据
// 当前用户数据
const user = {uid: "10009",avatar,uname: "jock"
}// 导航
const tabs = [{name: "最新",id: 1},{name: "最热",id: 2},
]
// 评论列表
const comment_list = [{id: "1",content: "真不错",time: "2020/1/1 12:00:00",like: 1,user: {uid: "10029",avatar,uname: "jock"}},{id: "2",content: "没毛病",time: "2020/11/01 12:00:00",like: 3,user: {uid: "10009",avatar,uname: "jock"}},{id: "3",content: "真棒",time: "2020/8/21 12:00:00",like: 10,user: {uid: "10008",avatar,uname: "alen"}},
]
4、逻辑处理
export default function Comment() {const [list, setList] = useState(comment_list.sort((a, b) => new Date(b.time) - new Date(a.time)));const [type, setType] = useState(1);const [content, setContent] = useState("");const inputRef = useRef();// tab切换const handleChange = (id) => {setType(id)if (id === 1) {setList(list.sort((a, b) => new Date(b.time) - new Date(a.time)))} else {setList(list.sort((a, b) => b.like - a.like))}}//发布const handleSend = () => {setList([...list, {id: Math.random().toString().slice(2),content,time: new Date().toLocaleString(),like: 0,user}])setContent("");inputRef.current.focus();}// 删除const handleDel = (id) => {setList(list.filter(item => item.id !== id))}return (<div className='comment-box'>{/* 导航栏 */}<div className='comment-tabs'><div className='tabs-left'><p>评论<span>{list.length}</span></p></div><div className='tabs-right'>{tabs.map(item =><div key={item.id} onClick={() => handleChange(item.id)} className={item.id === type ? 'active' : ''}>{item.name} <span></span></div>)}</div></div><div className='comment-wrap'>{/* 发表评论 */}<div className='comment-send'><div className='avatar'><img src={user.avatar} alt='' /></div><textarea className='content' ref={inputRef} value={content} onChange={(e) => setContent(e.target.value)} placeholder='下面我简单说两句' /><div className='button' onClick={() => handleSend()}>发布</div></div>{/* 评论列表 */}<div className='comment-list'>{list.map(item =><div className='comment-item' key={item.id}><div className='avatar'><img src={item.user.avatar} alt='' /></div><div className='right'><p className='username'>{item.user.uname}</p><p className='content'>{item.content}</p><p><span className='time'>{item.time}</span><span className='like'>点赞数: {item.like}</span>{item.user.uid === user.uid && <span className='delete' onClick={() => handleDel(item.id)}>删除</span>}</p></div></div>)}</div></div></div>)
}
