19-评论demo

 

 

App.js

import React, {  PureComponent } from 'react'
import CommentInput from './components/CommentInput'
import CommentItem from './components/CommentItem'

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      commentList: []
    }
  }

  render() {
    return (
      <div style={{ "width": "500px", "padding": "20px" }}>
        {
          this.state.commentList.map((item, index) => {
            return <CommentItem comment={ item } key={ item.id } removeItem={ e => this.removeComment(index) }/>
          })
        }
        <CommentInput submitComment={ info => this.submitComment(info)  }/>
      </div>
    )
  }

  submitComment(info) {
    console.log(info)

    this.setState({
      commentList: [...this.state.commentList, info]
    })
  }

  removeComment(index) {
    // const newCommentList = [...this.state.commentList]
    // newCommentList.splice(index, 1)
    // this.setState({
    //   commentList: newCommentList
    // })

    this.setState({
      commentList: this.state.commentList.filter((qitem, qindex) => qindex !== index)
    })
  }
}

 

import React, { PureComponent } from 'react'

import { Input, Button } from "antd"

import  moment  from 'moment'

export default class CommentInput extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      content: ''
    }
  }
  render() {
    return (
      <div>
        <Input.TextArea rows={4} cols={30}
                        value={ this.state.content }
                        onChange={ e => this.handleChange(e) } />
        <Button type='primary' onClick={ e => this.addComment() }>添加评论</Button>
      </div>
    )
  }
  handleChange(e) {
    this.setState({
      content: e.target.value
    })
  }
  addComment() {
    const commentInfo = {
      id: moment().valueOf(),
      avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1300%2Fntk-1300-31979.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668939799&t=4e22bdf05f93f12a9184f9ca5aa48bde",
      nickname: 'Tom',
      datetime: moment(),
      content: this.state.content
    }
    this.props.submitComment(commentInfo)
    this.setState({
      content: ''
    })
  }
}

 

import React, { PureComponent } from 'react'

import { Comment, Tooltip, Avatar } from 'antd'

import { DeleteOutlined } from '@ant-design/icons'

export default class CommentItem extends PureComponent {
  render() {
    const { nickname, avatar, content, datetime } = this.props.comment
    return (
      <div>
        {/* { this.props.comment.content } */}

        <Comment
          author={ nickname }
          // avatar={avatar}
          avatar = { <Avatar src={avatar} alt={ nickname }/> }
          content={ <p> {content} </p> }
          // datetime={ <span>{ datetime.format("YYY-MM-DD HH:mm:ss") }</span> }
          // datetime={ <span>{ datetime.fromNow() }</span> }
          datetime={
            <Tooltip title={datetime.format("YYY-MM-DD HH:mm:ss")}>
              <span>{ datetime.fromNow() }</span>
            </Tooltip>
          }
          actions={[
            <span onClick={e => this.removeItem()}><DeleteOutlined />删除</span>
          ]}
        />
      </div>
    )
  }

  removeItem() {
    this.props.removeItem()
  }
}