React实战：留言板

留言板

一、展示

留言板功能：“增加留言”，“删除留言”，“修改留言”

二、组件设计

CommentBox是顶层组件，里面包含 CommentList 和 CommentForm组件；CommentList里又有若干Comment组件。

三、安装React

这里我们采用 create-react-app 快速脚手架安装，具体安装方式请见：
React安装及目录结构（启动项目方式也在其中）

四、源码

组件：CommentBox、CommentList、Comment、CommentForm
分别对应一个js文件~

目录：

./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import CommentBox from './CommentBox';
import './index.css';let data = [{author:'bty',content:'悟空的自在极意功是真的厉害！！',date:'2019/2/1 下午4:00:05'},{author:'oppen',content:'世上只有妈妈好？爸爸呢？',date:'2019/2/1 下午3:04:05'}
];ReactDOM.render(<CommentBox data={data}/>, document.getElementById('root')
);

./src/CommentBox.js

import React, { Component } from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';class CommentBox extends Component {constructor(props) {super(props);this.state = {data: this.props.data,editToggle: Array(this.props.data.length).fill(false),};}handleCommentSubmit(comment) {this.setState({data: this.state.data.concat([comment]),});}handleCommentDelete(index) {const data = this.state.data.slice(0),editToggle = this.state.editToggle.slice(0);data.splice(index, 1);editToggle.splice(index, 1);this.setState({data: data,editToggle: editToggle,}); }handleEditToggle(index) {const editToggle = this.state.editToggle.slice(0);editToggle[index] = !editToggle[index];this.setState({editToggle: editToggle,});}handleCommentUpdate(index, comment) {const data = this.state.data.slice(0),editToggle = this.state.editToggle.slice(0);data[index] = comment;editToggle[index] = !editToggle[index];this.setState({data: data,editToggle: editToggle,}); }render() {return (<div className='comment-box'><h1 className='title'>评论</h1><CommentList {...this.state}handleEditToggle={(index) => this.handleEditToggle(index)}handleCommentDelete={(index) => this.handleCommentDelete(index)}handleCommentUpdate={(index, comment) => this.handleCommentUpdate(index, comment)}/><CommentForm handleCommentSubmit={(comment) => this.handleCommentSubmit(comment)}/></div>);}
}export default CommentBox;

./src/CommentList.js

import React from 'react';
import Comment from './Comment';function CommentList(props) {let comments = props.data.map((item, index) => {item.index = index;return (<Comment key={index}{...item}editToggle={props.editToggle[index]}handleEditToggle={() => props.handleEditToggle(index)}handleCommentDelete={() => props.handleCommentDelete(index)}handleCommentUpdate={props.handleCommentUpdate}/>);});return (<div>{comments}</div>);
}export default CommentList;

./src/Comment.js

import React, { Component } from 'react';class Comment extends Component {handleSubmitUpdate(e) {e.preventDefault();let author = this.props.author,content = this.refs.content.value,date = this.props.date;this.props.handleCommentUpdate(this.props.index, {author, content, date});}render() {let {content, author, date, editToggle} = {...this.props},editButton = editToggle ? '取消' : '编辑',contentDiv = editToggle ?<form className='editContent' onSubmit={(e) => this.handleSubmitUpdate(e)}><textarea defaultValue={content} ref="content"></textarea><button>完成</button></form>: <div className='content'>{content}</div>;return (<div className='comment'>{contentDiv}<div className='metadata'><div className='author'>{author}</div><div className='date'>{date}</div><a className='option' href='#' onClick={this.props.handleEditToggle}>{editButton}</a><a className='option' href='#' onClick={this.props.handleCommentDelete}>删除</a></div></div>);}
}export default Comment;

./src/CommentForm.js

import React, { Component } from 'react';class CommentForm extends Component {handleSubmit(e) {e.preventDefault();let content = this.refs.content.value,author = this.refs.author.value,date = new Date().toLocaleString(),warning = this.refs.warning;if(!author) {warning.innerHTML = '* 姓名不能为空';return null;}else if(!content) {warning.innerHTML = '* 评论不能为空';return null;}else {warning.innerHTML = '';}this.props.handleCommentSubmit({content, author, date});}render() {return (<form className='submitform' onSubmit={(e) => this.handleSubmit(e)}><span className='warning' ref='warning'></span><div className='form-row'><input type="text" placeholder='姓名' ref='author'/></div><div className='form-row'><textarea placeholder='评论' ref='content'></textarea></div><div className='form-row'><button>发表</button></div></form>);}
}export default CommentForm;

./src/index.css：

* {margin: 0;padding: 0;box-sizing: border-box;font-size: 12px;
}
a {text-decoration: none;
}
.comment-box {width: 80%;border: 1px solid #ccc;border-radius: 3px;margin: 15px;padding: 30px;
}
.title,
.comment,
.metadata,
.submitform {width: 100%;
}.title {border-bottom: 1px solid #ccc; padding-bottom: 10px;color: #B8860B;font-size: 16px;
}
.comment {background: #F8F8FF;margin-top: 20px;padding: 20px 20px 14px 20px;
}
.comment .content {width: 100%;font-size: 15px;color: #333;
}
.metadata{margin-top: 10px;
}
.metadata .author,
.metadata .date,
.metadata .option{display: inline-block;color: #A9A9A9;
}
.metadata .author,
.metadata .date {margin-right: 30px;
}
.metadata .option {margin-right: 6px;
}
.metadata .option:hover{text-decoration: underline;
}
.submitform {margin-top: 20px;
}
.editContent textarea{width:88%;min-height: 50px;border-radius: 3px;border: 1px solid #ccc;padding: 5px 10px;}
.editContent button {width: 40px;height: 40px;border-radius: 50%;border: 1px solid #97CBFF;background: #97CBFF;color: #fff;position: relative;left: 20px;top:-19px;
}
.editContent button:hover{cursor: pointer;background: #FF5151;border: 1px solid #FF5151;
}.warning {color: red;
}
.form-row {padding: 10px 0;
}
.form-row input[type='text'],
.form-row button,
.form-row textarea {border-radius: 2px;
}
.form-row input[type='text'],
.form-row textarea {width: 50%;border: 1px solid #ccc;padding: 8px 10px;
}
.form-row textarea {min-height: 100px;
}
.form-row button {padding: 6px;width: 80px;background: #97CBFF;border: 1px solid #97CBFF;color: #fff;font-size: 13px;
}
.form-row button:hover {cursor: pointer;
}

React实战：留言板相关推荐

phpstudy简单项目实战——留言板之第一弹
跟着PHP中文网学做留言板-- 一.数据库的创建 1.首先打开你电脑中已经下载完成的phpstudy(没有下载的可自行去下载) 2.点击MySQL管理器->phpMyAdmin->执行(用 ...
React（05）：使用react完成简单留言板案例
前言之前学了react基本语法和jsx/组件化,这里还是用ts学习时候的本地留言板案例来实践一下之前的学习语法: 正文注意点引入react.react-dom.babel,development ...
guestbook.php注入,php防注入留言板（simple）
新手学php,试手案例便是留言板.以前未连接数据库时,我是直接将用户输入的留言写入到一个txt,然后再从txt读取显示(~.~别鄙视). 最近学习了php访问MySQL数据库的一些知识,重写了一下留言 ...
PHP初级练习实战之公司留言板（原生）
PHP初级练习实战之留言板初学者做的东西,有的地方写的不好,哈哈哈! 一.知识重点 1.三目运算 $page= empty($_GET['p']) ? 1: $_GET['p']; 2.数据库的操作 ...
Vue实战篇二十九：模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
机器学习实战4.2 朴素贝叶斯案例：屏蔽社区留言板的侮辱性言论
机器学习实战4.2 朴素贝叶斯案例:屏蔽社区留言板的侮辱性言论参考地址:https://cuijiahua.com/blog/2017/11/ml_4_bayes_1.html 一.引子很久没更新 ...
react+koa实现留言板功能
前言自己用react+koa实现一个留言板的功能,留言的内容可以是文字.图片.表情.视频.音频.在这里记录和总结. 项目地址:github地址预览地址:预览地址截图实现前台使用了react和 ...
Thinkphp5实战之留言板
本节主要通过Thinkphp5来实现简易留言板的基本功能.麻雀虽小,五脏俱全.从以下几个方面来进一步认识Thinkphp5,包括:目录布局.MCV的运用.对数据的增删改查.留言板功能逻辑等.打牢基础, ...
python+Mysql+flask架构的在线留言板实战
在线留言板实战项目说明文档用python操作mysql完成一个在线留言板系统 1.设计留言板表 2.通过python语言实现 1 项目基本功能留言板系统主要功能:(要求使用类实现) 1.显示留言板 ...