react-发表评论案例

评论列表组件

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()
  }
}