react 评论管理效果实现

最新推荐文章于 2024-09-22 22:57:28 发布

转载最新推荐文章于 2024-09-22 22:57:28 发布 · 1.1k 阅读

react 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了一个基于React的评论系统的构建过程，包括组件设计、状态管理、添加与删除评论功能的实现。通过分解为多个子组件，如评论输入框、评论列表及单条评论项，展示了如何在React中高效地组织代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现类似这样的效果

2.定义几个组件，静态的左边提交内容，右边评论列表，和每条评论内容

3.app是公用组件

import React, {Component} from 'react'
import CommentAdd  from './comment-add'
import CommentList from './comment-list'


export default class Page extends Component{
    // constructor (props){
    //     super(props)
    //     this.state={
    //         comments:[
    //             {username:'tom',content:'dklajf'}
    //         ]
    //     }
    // }
    state={
        comments:[
            {username:'tom',content:'dklajf'}
        ]
    }
    // 删除行为
    delComents= (index)=>{
        const {comments} = this.state
        comments.splice(index,1) 
        this.setState({comments})

    }
    addComents = (comment) => {            //添加行为
        const {comments} = this.state
        comments.unshift(comment)
        this.setState({comments})
    }
    render(){
        const {comments}=this.state
        return(
            <div>
               <h2>react 评论demo</h2>
               <div className="container">
                    <div className="col-md-4">
                        <CommentAdd addComents={this.addComents} />
                    </div>
                    <div className="col-md-8">
                        <CommentList comments={comments} delComents={this.delComents}/>
                    </div>
               </div>
            </div>
        )
    }
}

2.左边区域，要添加的内容 add.jsx

import React, {Component} from 'react'
import propTypes from 'prop-types'


export default class CommentAdd extends Component{
    static propTypes={
        addComents:propTypes.func.isRequired
    }

    state ={  //可控组件有状态
        username:'',
        content:''
    }

    add = () => {
        const comments=this.state
        this.props.addComents(comments) //更新状态
        //清除数据
        this.setState({
            username:'',
            content:''
        })
    }    

    change1 = (event) =>{
        const username=event.target.value
        this.setState({username})
    }
    change2 = (event) =>{
        const content=event.target.value
        this.setState({content})
    }
    render(){
        const {username,content}=this.state
        return(
            <div>
              <form action="" className='form-horizontal'>
                <div className="form-group">
                    <label htmlFor="">用户名</label>
                    <input type="text" className='form-control' value={username} onChange={this.change1}/>
                </div>
                <div className="form-group">
                    <label htmlFor="">评论内容</label>
                   <textarea name="" id="" cols="30" rows="10" value={content} onChange={this.change2}></textarea>
                </div>
                <div className="form-group">
                   
                    <button type='button' className='btn' onClick={this.add}>提交</button>
                </div>
              </form>
            </div>
        )
    }
}

3. list.jsx 列表组件

import React, {Component} from 'react'
import CommentItem from './comment-item'
import PropTypes from 'prop-types'

export default class CommentList extends Component{

    // 给组件类指定属性
    static propTypes={
             comments:PropTypes.array.isRequired,
             delComents:PropTypes.func.isRequired
         }

    render(){
        const {comments,delComents}=this.props
        const display=comments.length===0?"block":"none"
        return(
            <div>
               <h3>评论回复</h3>
               <h2 style={{display}}>暂无评论，点击左侧添加评论</h2>
               <ul className='list-group'>
                   {
                       comments.map((comment,index) => <CommentItem key={index} comments={comment} delComents={delComents} index={index}/>)
                   }
               </ul>
            </div>
        )
    }
}

// CommentList.propTypes={
//     comments:PropTypes.array.isRequired
// }

4.第一条评论内容 item.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class CommentItem extends Component{
    static propTypes={
        comments:PropTypes.object.isRequired,
        delComents:PropTypes.func.isRequired,
        index:PropTypes.number.isRequired
    }
    del = ()=>{
        const {comments,delComents,index}=this.props
        if(window.confirm(`确定删除${comments.username}的评论吗？`)){
            delComents(index)
        }
    }
    render(){
        const {comments}=this.props
        return(
               <li className='list-group-item'>
                <div className='handle'>
                    <a href="javascript:;" onClick={this.del}>删除</a>
                </div>
                <p> <span>{comments.username}</span>说： </p>
                <p>{comments.content}</p>
               </li>
        )
    }
}

可添加评论，可删除评论