React实现评论的添加和删除


Posted in Javascript onOctober 20, 2020

本文实例为大家分享了React实现评论添加和删除的具体代码,供大家参考,具体内容如下

一、效果图

React实现评论的添加和删除

React实现评论的添加和删除

React实现评论的添加和删除

React实现评论的添加和删除

二、需求描述

1. 手动输入用户名和评论内容,点击提交;输入内容被追加到右侧评论列表;

2.  点击评论列表的“删除”按钮,弹框提示确定删除用户“xx”;

3. 点击“确定”,“xx”用户发表的评论被删除;

4. 所有评论均被删除时,显示“暂无评论,点击添加评论!!!”

三、代码实现

App.js

import React from 'react';
import './App.css';
import CommentAdd from '../src/components/CommentAdd'
import CommentList from '../src/components/CommentList'
import PropTypes from 'prop-types'
import "../src/assets/css/bootstrap.css"
 
class App extends React.Component {
 // 给组件对象指定state属性
 // 初始化状态
 state = {
 comments: [
  {username: "Tom", content: "React太容易了"},
  {username: "Jack", content: "React太难了"}
 ]
 }
 
 static propTypes = {
 comments: PropTypes.array.isRequired,
 addComment: PropTypes.func.isRequired,
 deleteComment: PropTypes.func.isRequired
 }
 
 addComment = (comment) => {
 // 将添加的评论追加到评论list上
 const {comments} = this.state
 comments.unshift(comment)
 // 更新状态
 this.setState({comments})
 }
 deleteComment = (index) => {
 const {comments} = this.state
 comments.splice(index, 1)
 this.setState({comments})
 }
 
 render() {
 const {comments} = this.state
 return (
  <div>
  <header className="site-header jumbotron">
   <div className="container">
   <div className="row">
    <div className="col-xs-12">
    <h2>评论管理列表</h2>
    </div>
   </div>
   </div>
  </header>
  <div className="container">
   <CommentAdd addComment={this.addComment}/>
   <CommentList comments={comments} deleteComment={this.deleteComment}/>
  </div>
  </div>
 );
 }
}
 
export default App;

CommentAdd.js

import React, {Component} from 'react';
import PropTypes from 'prop-types'
import "../assets/css/bootstrap.css"
 
class CommentAdd extends Component {
 
 state = {
 username: "",
 content: ""
 }
 
 static propTypes = {
 addComment: PropTypes.func.isRequired
 }
 handleNameChange = (event) => {
 const username = event.target.value
 this.setState({username});
 }
 handleContentChange = (event) => {
 const content = event.target.value
 this.setState({content});
 }
 handleSubmit = () => {
 const comment = this.state
 this.props.addComment(comment)
 // 清楚输入数据
 this.setState({
  username: "",
  content: ""
 });
 }
 
 render() {
 const {username, content} = this.props
 return (
  <div className="col-md-4">
  <form className="form-horizontal">
   <div className="form-group">
   <label>用户名:</label>
   <input type="text" className="form-control" placeholder="请输入用户名" value={username}
    onChange={this.handleNameChange}/><br/>
   </div>
   <div className="form-group">
   <label>评论内容:</label>
   <textarea className="form-control" rows="6" placeholder="请输入评论内容"
     value={content} onChange={this.handleContentChange}>
   </textarea>
   </div>
   <div className="form-group">
   <div className="col-sm-offset-2 col-sm-10">
    <button type="button" className="btn btn-default pull-right"
     onClick={this.handleSubmit}>提交
    </button>
   </div>
   </div>
  </form>
  </div>
 );
 }
}
 
export default CommentAdd;

CommentList.js

import React, {Component} from 'react';
import CommentItem from "./CommentItem";
import PropTypes from 'prop-types'
import "../assets/css/comment_list.css"
 
class CommentList extends Component {
 
 static propTypes = {
 comments: PropTypes.array.isRequired,
 deleteComment: PropTypes.func.isRequired
 }
 
 render() {
 const {comments, deleteComment} = this.props
 const display = comments.length === 0 ? "block" : "none"
 return (
 
  <div className="col-md-8">
  <h4>评论回复:</h4>
  <h5 style={{display}}>暂无评论,点击添加评论!!!</h5>
  <ul>
   {
   comments.map((comment, index) => <li key={index}><CommentItem comments={comment} index={index}
           deleteComment={deleteComment}/>
   </li>)
   }
  </ul>
  </div>
 );
 }
}
 
export default CommentList;

CommentItem.js

import React, {Component} from 'react';
import PropTypes from 'prop-types'
import "../assets/css/comment_item.css"
 
class CommentItem extends Component {
 static propTypes = {
 comments: PropTypes.array.isRequired,
 deleteComment: PropTypes.func.isRequired,
 index: PropTypes.number.isRequired
 }
 
 handleDeleteComment = () => {
 const {comments, deleteComment, index} = this.props
 if (window.confirm(`确定删除${comments.username}嘛?`)) {
  deleteComment(index)
 }
 }
 
 render() {
 const {comments} = this.props
 return (
  <div className="list-group-item">
  <div className="handle">
   <a href="javascript:;" rel="external nofollow" onClick={this.handleDeleteComment}>删除</a>
  </div>
  <p className="user"><span>{comments.username}</span><span>说:</span></p>
  <p className="centence">{comments.content}</p>
  </div>
 );
 }
}
 
export default CommentItem;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax 登录验证实现代码
Sep 23 Javascript
Js 随机数产生6位数字
May 13 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
koa-router源码学习小结
Sep 07 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 #Javascript
微信小程序使用前置摄像头拍照
Oct 22 #Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
vue3为什么要用proxy替代defineProperty
Oct 19 #Javascript
jQuery实现推拉门效果
Oct 19 #jQuery
小程序实现左滑删除的效果的实例代码
Oct 19 #Javascript
You might like
基于php实现七牛抓取远程图片
2015/12/01 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
QML实现钟表效果
2020/06/02 Python
python如何建立全零数组
2020/07/19 Python
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
离婚协议书范本及离婚须知
2014/10/15 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
先进教师个人总结
2015/02/11 职场文书
敬老院活动感想
2015/08/07 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript