import React from 'react' import CommentAdd from '../comment-add/comment-add' import CommentList from '../comment-list/comment-list' export default class App extends React.Component { // 第一种初始化数据对象方法 /* constructor(props) { super(props) this.state = { comments: [ {username: 'Tom', content: 'react挺好的!'}, {username: 'Jack', content: 'react有点难!'} ] } }*/ //第二种初始化数据对象方法,给对象指定state属性 state = { comments: [ {username: 'Tom', content: 'react挺好的!'}, {username: 'Jack', content: 'react有点难!'}, {username: 'Jensen', content: '干就完事儿了!'} ] } //添加评论 addComment = (comment) => { //得到状态 const {comments} = this.state; //修改状态内容 comments.unshift(comment); //最后更新状态 this.setState({comments}); } //删除指定评论 deleteComment = (index) => { const {comments} = this.state // splice可以进行三种操作,增(index,0,{})、删(index,1)、改(index,1,{}) comments.splice(index, 1); //更新状态 this.setState({comments}); } render() { const {comments} = this.state return ( <div> <div> <header className="site-header jumbotron"> <div className="container"> <div className="row"> <div className="col-xs-12"> <h1>请发表对React的评论</h1> </div> </div> </div> </header> <div className="container"> <CommentAdd addComment={this.addComment}/> <CommentList comments={comments} deleteComment={this.deleteComment}/> </div> </div> </div> ) } }
import React, {Component} from 'react' import PropTypes from 'prop-types'; export default class CommentAdd extends Component { //声明接受的属性 static propTypes = { addComment: PropTypes.func.isRequired } state = { /*名字不能随便乱写,是根据app.jsx来写的*/ username: '', content: '' } handleSubmit = () => { //收集数据(使用受控组件),并封装成comment对象 const comment = this.state //更新状态 this.props.addComment(comment) //清除输入数据 this.setState({ username: '', content: '' }); } handleNameChange = (event) => { const username = event.target.value this.setState({username}) } handleContentChange = (event) => { const content = event.target.value this.setState({content}) }; render() { const {username, content} = this.state 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}/> </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> ) } };
import React, {Component} from 'react'; import PropTypes from 'prop-types' import './commentItem.css' export default class CommentItem extends Component { static propTypes = { comment: PropTypes.object.isRequired, deleteComment: PropTypes.func.isRequired, index:PropTypes.number.isRequired } handleClick = () => { const {comment, deleteComment,index} = this.props //提示 if (window.confirm(`确定删除${comment.username}的评论吗`)) { deleteComment(index); } //确定后删除 } render() { const {comment} = this.props return ( <li className="list-group-item"> <div className="handle"> <a href="javascript:;" onClick={this.handleClick}>删除</a> </div> <p className="user"><span>{comment.username}</span><span>说:</span></p> <p className="centence">{comment.content}</p> </li> ); } }
li { transition: .5s; overflow: hidden; } .handle { width: 40px; border: 1px solid #ccc; background: #fff; position: absolute; right: 10px; top: 1px; text-align: center; } .handle a { display: block; text-decoration: none; } .list-group-item .centence { padding: 0px 50px; } .user { font-size: 22px; }
import React, {Component} from 'react' import PropTypes from 'prop-types' import CommentItem from '../comment-item/comment-item' import './commentList.css' export default 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"> <h3 className="reply">评论回复:</h3> <h2 style={{display}}>暂无评论,点击左侧添加评论!!!</h2> <ul className="list-group"> { comments.map((c, index) => <CommentItem comment={c} key={index} deleteComment={deleteComment} index={index}/>) } </ul> </div> ) } } //这种属性方式有点麻烦 /* CommentList.propTypes = { comments: PropTypes.array.isRequired }*/
.reply { margin-top: 0px; }