【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:;" 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;

完整资源已上传至csdn，需要的小伙伴可以去下载呦！！！