冬青街 做网站,网站 建设 网站设计公司,html5网站开发视频教程,淘宝客做网站自动更新实现功能
1、渲染评论列表 2、删除评论 3、渲染导航栏和高亮 4、评论列表排序功能 5、获取评论 6、点击发布按钮发布评论 7、清空输入框 8、重新聚焦
实现代码
1、需要引入
import React, { useRef, useState } from react
import avatar from ../logo.png //头…
实现功能
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 classNamecomment-box{/* 导航栏 */}div classNamecomment-tabsdiv classNametabs-leftp评论span{list.length}/span/p/divdiv classNametabs-right{tabs.map(item div key{item.id} onClick{() handleChange(item.id)} className{item.id type ? active : }{item.name} span/span/div)}/div/divdiv classNamecomment-wrap{/* 发表评论 */}div classNamecomment-senddiv classNameavatarimg src{user.avatar} alt //divtextarea classNamecontent ref{inputRef} value{content} onChange{(e) setContent(e.target.value)} placeholder下面我简单说两句 /div classNamebutton onClick{() handleSend()}发布/div/div{/* 评论列表 */}div classNamecomment-list{list.map(item div classNamecomment-item key{item.id}div classNameavatarimg src{item.user.avatar} alt //divdiv classNamerightp classNameusername{item.user.uname}/pp classNamecontent{item.content}/ppspan classNametime{item.time}/spanspan classNamelike点赞数: {item.like}/span{item.user.uid user.uid span classNamedelete onClick{() handleDel(item.id)}删除/span}/p/div/div)}/div/div/div)
}
