React复杂案例之评论

1.index

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/app/app'

/*

    1.划分组件
    2.静态组件
    3.交互组件

 */

ReactDOM.render(<App/>,document.getElementById('root'));

2.app

import React,{Component} from 'react'
import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'

export default class App extends Component{

    constructor(props){
        super(props);
    }

    //初始化数据
    state = {
        comments:[
            {username:'tom',content:'react is easy'},
            {username:'mary',content:'java is easy'},
            {username:'jack',content:'php is easy'},
        ]
    };

    //添加评论，传递给添加组件
    addComment = (comment)=>{
        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">
                                <h1>请发表对React的评论</h1>
                            </div>
                        </div>
                    </div>
                </header>
                <div className="container">
                    <CommentAdd addComment={this.addComment}/>
                    <CommentList comments={comments} deleteComment={this.deleteComment}/>
                </div>
            </div>
        )
    }
}

3.add

import React,{Component} from 'react'
import PropTypes from 'prop-types'

export default class CommentAdd extends Component{

    static propTypes = {
        addComment:PropTypes.func.isRequired
    };

    state = {
      username:'',
      content:''
    };

    //处理提交事件
    handleSubmit = (e)=>{
        //收集数据
        const comment = this.state;
        //更新状态
        this.props.addComment(comment);
        //清楚输入数据
        this.setState({
            username:'',
            content:''
        });
    };

    handleUsernameChange = (e)=>{
        const username = e.target.value.trim();
        this.setState({username})
    };

    handleContentChange = (e)=>{
        const content = e.target.value.trim();
        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.handleUsernameChange}/>
                    </div>
                    <div className="form-group">
                        <label>评论内容</label>
                        <textarea className="form-control" rows="6" placeholder="评论内容" value={content} onChange={this.handleContentChange}/>
                    </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>
        )
    }
}

4.list

import React,{Component} from 'react'
import PropTypes from 'prop-types'

import './commentList.css'

import CommentItem from '../comment-item/comment-item'

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((comment,index)=><CommentItem comment={comment} deleteComment={deleteComment} key={index} index={index}/>)
                    }
                </ul>
            </div>
        )
    }
}

5.item

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
    };

    handleDeleteClick = (e)=>{
        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.handleDeleteClick}>删除</a>
                </div>
                <p className="user"><span>{comment.username}</span><span>说:</span></p>
                <p className="centence">{comment.content}</p>
            </li>
        )
    }
}