React评论列表案例

效果预览\

css文件\

.app {
  width: 300px;
  padding: 10px;
  border: 1px solid #999;
}

.user {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.scroll {
  height: 300px;
  overflow-y: auto;
}
.no-comment {
  text-align: center;
  margin-top: 30px;
}

其中overflow-y:auto代表可以在y轴上滚动。overflow-x:auto同理。 js文件来实现主要功能。包括评论渲染、增添、删除、全部清空。

import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'

class App extends React.Component {
    state={
        user:"",
        content:"",
        list:[{"user":"刘德华","content":"冰雨"},
            {"user":"丁真","content": "鉴定为真！"}]
    }
  render() {
    return (
      <div className="app">
        <div>
          <input className="user" type="text" placeholder="请输入评论人" onChange={this.handleChange}/>
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
            onChange={this.handleChange}
          />
          <br />
          <button onClick={this.handleCommit}>发表评论</button>
          <button onClick={this.clearAllComment}>清空评论</button>
        </div>
          {
              this.state.list.length===0?<div className="no-comment">暂无评论</div>:
                  <ul className="scroll">
                      {this.state.list.map(item=><li>
                          <h3>评论人：{item.user}</h3>
                          <p>评论内容：{item.content}</p>
                          <button name={item.user} onClick={this.deleteOneComment}>删除</button></li>)}
                  </ul>
          }
      </div>
    )
  }
  handleChange=(e)=>{
        const name=e.target.className
        this.setState({[name]:e.target.value})
  }
  handleCommit=()=>{
        if(this.state.user!=null && this.state.content!=null)
        {
            const user=this.state.user
            const content=this.state.content
            const newList=this.state.list
            newList.push({"user":user+"","content":content+""})
            this.setState({
                list:newList,
                user:"",
                content:""
            })
        }
  }
  clearAllComment=()=>{
        this.setState({
            list: []
        })
  }
  deleteOneComment=(e)=>{
      const name=e.target.name
      const newList=this.state.list
        for(let i=0;i<newList.length;i++)
        {
            if(newList[i].user===name)
            {
                newList.splice(i,1)
            }
        }
      this.setState({
          list:newList
      })
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

需要注意的是，react在修改列表时要使用原生js再创建一个列表。之后使用setState把新的列表添加到state中。