React之留言

CommentApp

import React, { Component } from 'react'
import CommentInput from './CommentInput'
import CommentList from './CommentList'

class CommentApp extends Component {
    constructor() {
        super()
        this.state = {
            comments: []
        }
    }

    handleSubmitComment(comment) {
        if (!comment) return
        if (!comment.username) return alert('请输入用户名')
        if (!comment.content) return alert('请输入评论内容')
        this.state.comments.push(comment)
        this.setState({
            comments: this.state.comments
        })
    }

    render() {
        return (
            <div className='wrapper'>
                <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
                <CommentList comments={this.state.comments} />
            </div>
        )
    }
}

export default CommentApp

CommentInput

import React, { Component } from 'react'

class CommentInput extends Component {
    constructor() {
        super()
        this.state = {
            username: '',
            content: ''
        }
    }

    handleUsernameChange(event) {
        this.setState({
            username: event.target.value
        })
    }

    handleContentChange(event) {
        this.setState({
            content: event.target.value
        })
    }

    handleSubmit() {
        if (this.props.onSubmit) {
            this.props.onSubmit({
                username: this.state.username,
                content: this.state.content,
            })
        }
        this.setState({ content: '' })
    }

    render() {
        return (
            <div className='comment-input'>
                <div className='comment-field'>
                    <span className='comment-field-name'>用户名：</span>
                    <div className='comment-field-input'>
                        <input
                            value={this.state.username}
                            onChange={this.handleUsernameChange.bind(this)} />
                    </div>
                </div>
                <div className='comment-field'>
                    <span className='comment-field-name'>评论内容：</span>
                    <div className='comment-field-input'>
                        <textarea
                            value={this.state.content}
                            onChange={this.handleContentChange.bind(this)} />
                    </div>
                </div>
                <div className='comment-field-button'>
                    <button
                        onClick={this.handleSubmit.bind(this)}>
                        发布
                    </button>
                </div>
            </div>
        )
    }
}

export default CommentInput

CommentList

import React, { Component } from 'react'
import Comment from './Comment'

class CommentList extends Component {
    render() {
        return (
            <div>
                {this.props.comments.map((comment, i) =>
                    {/*注意这里key的位置*/}
                    <Comment comment={comment} key={i} />
                )}
            </div>
        )
    }
}
CommentList.defaultProps = {
    comments: []
}
export default CommentList

Comment

import React, { Component } from 'react'

class Comment extends Component {
    render() {
        return (
            <div className='comment'>
                <div className='comment-user'>
                    {/*这里不需要对props进行修改，那就直接使用*/}
                    <span>{this.props.comment.username} </span>：
                </div>
                <p>{this.props.comment.content}</p>
            </div>
        )
    }
}

export default Comment

index

import React from 'react';
import ReactDOM from 'react-dom';
import CommentApp from './modules/CommentApp';

ReactDOM.render(
    <CommentApp/>,
    document.getElementById("app")
)

style.css

body{margin:0;padding:0;font-family:sans-serif;background-color:#fbfbfb}.wrapper{width:500px;margin:10px auto;font-size:14px;background-color:#fff;border:1px solid #f1f1f1;padding:20px}.comment-input{background-color:#fff;border:1px solid #f1f1f1;padding:20px;margin-bottom:10px}.comment-field{margin-bottom:15px;display:flex}.comment-field .comment-field-name{display:flex;flex-basis:100px;font-size:14px}.comment-field .comment-field-input{display:flex;flex:1}.comment-field-input input,.comment-field-input textarea{border:1px solid #e6e6e6;border-radius:3px;padding:5px;outline:0;font-size:14px;resize:none;flex:1}.comment-field-input textarea{height:100px}.comment-field-button{display:flex;justify-content:flex-end}.comment-field-button button{padding:5px 10px;width:80px;border:none;border-radius:3px;background-color:#00a3cf;color:#fff;outline:0;cursor:pointer}.comment-field-button button:active{background:#13c1f1}.comment-list{background-color:#fff;border:1px solid #f1f1f1;padding:20px}.comment{display:flex;border-bottom:1px solid #f1f1f1;margin-bottom:10px;padding-bottom:10px;min-height:50px}.comment .comment-user{flex-shrink:0}.comment span{color:#00a3cf;font-style:italic}.comment p{margin:0}