React使用antd实现简易发布评论功能(props,events两种方式实现)

实现的效果如下图所示

介绍两种方法实现，先介绍第一种props

创建两个组件，Cominput.js 输入框组件和Comitem.js 评论列表组件，还有一个主App.js

实现原理就是Cominput组件发送消息到App父组件，然后父组件储存，再把这个消息传递到Comitem组件，App.js起到了一个中间桥梁的作用

先安装一下antd，@ant-design/icons，moment，这个就自己安装吧,yarn add即可

Cominput.js

import React, { PureComponent } from 'react'

import { Input,Button } from 'antd'
import moment from 'moment'

export default class Cominput 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(){
    // console.log(this.state.content)
    const commentInfo ={
      id:moment().valueOf(),
      avatar:'https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3175688956,3116790055&fm=85&app=92&f=JPEG?w=121&h=75&s=F25331C44C4DA55506C09C8003007098',
      nickname:'lsh',
      datetime:moment(),
      content:this.state.content
    }
    this.props.submitComment(commentInfo)
    this.setState({
      content:''
    })
  }
}
通过 onChange和value我们对content进行了双向绑定，类似于vue中的v-model的效果,然后通过子传父，将数据传到父组件App.js中去

App.js

import React, { PureComponent } from 'react'

import Cominput from './components/Cominput'
import Comitem from './components/Comitem'

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.state={
      comallItems:[]
    }
  }
  render() {
    return (
      <div style={{width:"500px",padding:"20px"}}>
        {
          this.state.comallItems.map((item,index)=>{
            return <Comitem comment={item} key={item.id}
                    removeItem={e=>this.removeComment(index)}/>
          })
        }
        <Cominput submitComment={info=>this.submitComment(info)}/>
      </div>
    )
  }
  submitComment(info){
    this.setState({
      comallItems:[...this.state.comallItems,info]
    })
  }
  removeComment(index){
    const newCommentList = [...this.state.comallItems]
    newCommentList.splice(index,1)
    this.setState({
      comallItems:newCommentList
    })
  }
}

removeComment事件是删除按钮的操作，submitComment就是子传父事件，然后将App.js中的comallItems数组里面加上传过来的数据，然后把这个数组遍历再传递到Comitem进行展示

Comitem.js

import React, { PureComponent } from 'react'
  import {
    Comment,
    Avatar,
    Tooltip,
  } 
  from 'antd'
import {DeleteOutlined} from '@ant-design/icons'

export default class Comitem extends PureComponent {
  render() {
    const {nickname,avatar,content,datetime} = this.props.comment
    return (
      <Comment
      author={<a href="/#">{nickname}</a>}
      avatar={
        <Avatar
          src={avatar}
          alt={nickname}
        />
      }
      content={
        <p>
          {content}
        </p>
      }
      datetime={
        <Tooltip title={datetime.format('YYYY-MM-DD HH:mm:ss')}>
          <span>{datetime.fromNow()}</span>
        </Tooltip>
      }
      actions={[
        <span onClick={e=>this.removeItem()}><DeleteOutlined />删除</span>
      ]}
    />
    )
  }
  removeItem(){
    this.props.removeItem()
  }
}

这样就实现了效果

再介绍第二种方法，通过events实现兄弟组件传数据，无需通过父组件作为一个桥梁

首先肯定就是安装这个events

yarn add events

然后创建一个ev.js文件

import {EventEmitter} from 'events'
export default new EventEmitter();

App.js

import React, { PureComponent } from 'react'

import Cominput from './components/Cominput'
import Comitem from './components/Comitem'


export default class App extends PureComponent {
  render() {
    return (
      <div style={{width:"500px",padding:"20px"}}>
        <Comitem/>
        <Cominput/>
      </div>
    )
  }
}

Cominput.js

import React, { PureComponent } from 'react'

import { Input,Button } from 'antd'
import moment from 'moment'
import eventBus  from './ev'


export default class Cominput 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://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3175688956,3116790055&fm=85&app=92&f=JPEG?w=121&h=75&s=F25331C44C4DA55506C09C8003007098',
      nickname:'lsh',
      datetime:moment(),
      content:this.state.content
    }
    eventBus.emit("events",commentInfo)

    this.setState({
      content:''
    })
  }
}

Comitem.js

import React, { PureComponent } from 'react'

  import {
    Comment,
    Avatar,
    Tooltip,
  } 
  from 'antd'
import {DeleteOutlined} from '@ant-design/icons'
import eventBus  from './ev'


export default class Comitem extends PureComponent {
  constructor(props){
    super(props);
    this.state={
      ComitemList:[]
    }
  }
  componentDidMount(){
    //进行事件监听
    eventBus.addListener("events",this.handleSayHelloListener)
  }
  componentWillMount(){
    eventBus.removeListener("events",this.handleSayHelloListener)
  }
  handleSayHelloListener = (message) =>{
    this.setState({
      ComitemList:[...this.state.ComitemList,message]
    })
  }

  render() {
    return (
      <div>
        {
       this.state.ComitemList.map((item,index)=>{
           return     <Comment
      key={item.id}
      author={<a href="/#">{item.nickname}</a>}
      avatar={
        <Avatar
          src={item.avatar}
          alt={item.nickname}
        />
      }
      content={
        <p>
          {item.content}
        </p>
      }
      datetime={
        <Tooltip title={item.datetime.format('YYYY-MM-DD HH:mm:ss')}>
          <span>{item.datetime.fromNow()}</span>
        </Tooltip>
      }
      actions={[
        <span onClick={e=>this.removeItem(index)}><DeleteOutlined />删除</span>
      ]}
    />
  })
  }
          </div>
    )
  }
  removeItem(index){
    const newcomList = [...this.state.ComitemList]
    newcomList.splice(index,1)
    this.setState({
      ComitemList:newcomList
    })
  }
}

这种方法也很不错，没有第一种那么复杂