欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react-发表评论案例

程序员文章站 2022-05-28 14:13:35
评论列表组件 评论显示 发表评论 ......

评论列表组件

import react from 'react'
import cmtitem from './cmtitem.jsx'
import cmtbox from './cmtbox.jsx'

// 评论列表组件
export default class cmtlist extends react.component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        { user: 'zs', content: '123' },
        { user: 'ls', content: 'qqq' },
        { user: 'xiaohong', content: 'www' }
      ]
    }
  }

  // 在组件尚未渲染的时候,就立即 获取数据
  componentwillmount() {
    this.loadcmts()
  }

  render() {
    return <div>
      <h1>这是评论列表组件</h1>

      {/* 发表评论的组件 */}
      {/* 相对于 vue 中,把 父组件传递给子组件的 普通属性 和 方法属性,区别对待, 普通属性用 props 接收, 方法 使用 this.$emit('方法名') */}
      {/* react 中,只要是传递给 子组件的数据,不管是 普通的类型,还是方法,都可以使用 this.props 来调用 */}
      <cmtbox reload={this.loadcmts}></cmtbox>

      <hr />


      {/* 循环渲染一些评论内容组件 */}
      {this.state.list.map((item, i) => {
        return <cmtitem key={i} {...item}></cmtitem>
      })}
    </div>
  }

  // 从本地存储中加载 评论列表
  loadcmts = () => {
    var list = json.parse(localstorage.getitem('cmts') || '[]')
    this.setstate({
      list
    })
  }
}

评论显示

import react from 'react'

// 评论列表项组件
export default class cmtitem extends react.component {

  render() {
    return <div style={{ border: '1px solid #ccc', margin: '10px 0' }}>
      <h3>评论人:{this.props.user}</h3>
      <h5>评论内容:{this.props.content}</h5>
    </div>
  }
}

发表评论

import react from 'react'

// 评论列表框组件
export default class cmtbox extends react.component {

  render() {
    return <div>
      <label>评论人:</label><br />
      <input type="text" ref="user" /><br />
      <label>评论内容:</label><br />
      <textarea cols="30" rows="4" ref="content"></textarea><br />

      <input type="button" value="发表评论" onclick={this.postcomment} />
    </div>
  }

  postcomment = () => {
    // 1. 获取到评论人和评论内容
    // 2. 从 本地存储中,先获取之前的评论数组
    // 3. 把 最新的这条评论,unshift 进去
    // 4. 在把最新的评论数组,保存到 本地存储中
    var cmtinfo = { user: this.refs.user.value, content: this.refs.content.value }
    var list = json.parse(localstorage.getitem('cmts') || '[]')
    list.unshift(cmtinfo)
    localstorage.setitem('cmts', json.stringify(list))

    this.refs.user.value = this.refs.content.value = ''

    this.props.reload()
  }
}