Front-end/react/4.评论列表案例.md

import React from "react";

class CommentList extends React.Component {
    state = {
        comments: [
            // { id: 1, name: 'shi', content: '沙发' },
            // { id: 2, name: 'xiao', content: '板凳' },
            // { id: 3, name: 'hua', content: '地板' }
        ],
        userName:'',
        userContext:''
    }
    renderList() {
        const {comments}= this.state
        if (comments.length === 0) {
            return (<div className="no-Comment">暂无评论</div>)
        }
        return (<ul>
            {
                comments.map(item => (
                    <li key={item.id}>
                        <h4>评论人:{item.name}</h4>
                        <p>评论:{item.content}</p>
                    </li>
                ))
            }
        </ul>)
        // return this.state.comments.length === 0 ? (<div className="no-Comment">暂无评论</div>) :
        //     (<ul>
        //         {
        //             this.state.comments.map(item => (
        //                 <li key={item.id}>
        //                     <h4>评论人:{item.name}</h4>
        //                     <p>评论:{item.content}</p>
        //                 </li>
        //             ))
        //         }
        //     </ul>)

    }
    handleForm=(e)=>{
        const {name,value}= e.target
        this.setState({
            [name]:value
        })
    }
    addComment=()=>{
        const {comments,userName,userContext}= this.state
        // 非空校验
        if(userName.trim()===""||userContext.trim()===""){
            alert('请输入评论内容')
            return
        }
        const newComments = [{
            id:Math.random(),
            name:userName,
            content:userContext
        },...comments]
        this.setState({
            comments:newComments,
            // 清空文本空
            userContext:'',
            userName:''
        })


    }

    render() {
        const {userName,userContext}= this.state
        return (
            <div className="app">
                <div>
                    <input className="user" type="text" name="userName" value={userName} placeholder="请输入评论人" onChange={this.handleForm} />
                    <br />
                    <textarea className="content" cols="30" rows="10" name="userContext" value={this.state.userContext}  placeholder="请输入评论内容" onChange={this.handleForm}  />
                    <br />
                    <button onClick={this.addComment}>发表评论内容</button>
                </div>
                {/* {this.state.comments.length === 0 ? (<div className="no-Comment">暂无评论</div>) :
                    (<ul>
                        {
                            this.state.comments.map(item => (
                                <li key={item.id}>
                                    <h4>评论人:{item.name}</h4>
                                    <p>评论:{item.content}</p>
                                </li>
                            ))
                        }
                    </ul>)
                } */}
                {this.renderList()}
            </div>
        )
    }
}
export default CommentList