利用React实现评论功能

React功能之网页评论

效果如图所示

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

class App extends React.Component{
  state = {
    comments:[
      {id:1, name:"jack", content:"你好"},
      {id:2, name:"rose", content:"板凳"},
      {id:3, name:"tom", content:"楼主好人"}
    ],
    userName:'',
    userContent:''
  }
  rednderList(){
    const {comments} = this.state
    if(comments.length ===0){
      return <div className='no-conmment'>暂无评论，快去评论吧</div>
    }
    return(
      <ul>
           {
            comments.map(item=>(
              <li key={item.id}>
                 <h3 >用户：{item.name}</h3>
                 <p>评论内容：{item.content}</p>
              </li>
            ))
          }
         </ul>
    )
  }
  
  handleForm = (e)=>{
    const {name, value} = e.target;
    this.setState({
      [name]:value
    })
  }
  
  addConment= ()=>{
    const {comments,userName, userContent} = this.state;
    if(userName.trim()===''||userContent.trim()===''){
      alert('请输入昵称和内容');
      return;
    }
    const newComments = [{
      id: Math.random(),
      name:userName,
      content:userContent
    },...comments]
    this.setState({
      comments:newComments,
      userName:'',
      userContent:''
    })


  }

  render(){
    const {userName, userContent} = this.state;

    return(
      <div className='app'>
        <input className='user' type="text" placeholder='请输入昵称' value={userName} name="userName" onChange={this.handleForm}></input>
        <br />
        <textarea
          className='content'
          cols="30"
          rows="10"
          placeholder='请输入评论内容'
          value={userContent}
          name="userContent"
          onChange={this.handleForm}
        ></textarea>
        <br />
        <button onClick={this.addConment}>发表评论</button>
        {this.rednderList()}
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))