使用react写一个简单的评论系统

使用react写一个简单的评论系统

首先初始化项目

1. npm install -g create-react-app  // 已安装可以跳过
2. create-react-app my-app
3. cd my-app
4. npm start

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import * as commonList from './commonList';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <commonList.commonHead />
);
reportWebVitals();

commonList

import React from "react";
import * as base64 from './base64'

// 评论内容
class Content extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value:''
        }
    }
    returnCommon() {
        let date = new Date()
        let list = this.props.list
        // this.props.list = []
        // console.log(typeof this.props.list)
        list.push({
            name:'user999',
            content:this.state.value,
            date:date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()
        })
        this.props.setSelfState(list)
    }
    //文本框双向绑定
    changeText=(ev)=>{
        // this.state.textvalue = ev.target.value;
        this.setState({
            value:ev.target.value
        })
    }
    // 删除
    removeFun(index) {
        let list = this.props.list
        list.splice(index,1)
        this.props.setSelfState(list)
    }
    render() {
        return (
            <div>
                <div className='content'>
                    <img className='img' src={base64.avatar} />
                    <div className='right'>
                        <textarea onChange={this.changeText.bind(this)}  placeholder='发条友善的评论' />
                        <button onClick={this.returnCommon.bind(this)}>发表<br />评论</button>
                    </div>
                </div>
                {
                    this.props.list.map((item,index) => {
                        return <div key={item.name} className='content core'>
                            <img className='img' src={base64.avatar} />
                            <div className='right'>
                                <div className='name'>{item.name}</div>
                                <div className='substance'>{item.content}</div>
                                <div className="date-remove">
                                    <div className='create-date'>{item.date}</div>
                                    <div className="remove" onClick={this.removeFun.bind(this,index)}>删除</div>
                                </div>
                                <div className="line"></div>
                            </div>
                        </div>
                    })
                }
            </div>
        )
    }
}

// 评论
class commonHead extends React.Component {
    constructor() {
        super();
        let list = [
            {
                name:'五月天',
                content:'不打扰，是我的温柔',
                date:'2022/10/11 10:59:20',
            },
            {
                name:'周杰伦',
                content:'哎哟，不错哦',
                date:'2022/10/12 10:59:20',
            },
            {
                name:'刘德华',
                content:'给我一杯忘情水',
                date:'2022/10/13 10:59:20',
            }
        ]
        this.state = {
            num:3,
            active:0,
            content: list,
            list: list,
            listTwo: [
                {
                    name:'lzw',
                    content:'我打',
                    date:'2022/08/11 10:59:20',
                },
                {
                    name:'xhy',
                    content:'套你猴子',
                    date:'2022/02/12 09:59:20',
                },
                {
                    name:'ll',
                    content:'老六',
                    date:'2022/05/13 10:10:20',
                }
            ]
        }
        this.setSelfState =this.setSelfState .bind(this)
    }
    activeClick(active,e) {
        this.setState({
            active:active,
            content:active === 0?this.state.list:this.state.listTwo
        })
    }
    setSelfState(list) {
        this.setState({
            content: list
        })
    }
    render() {
        return (
            <div className="common">
                <div className="title">{this.state.content.length} 评论</div>
                <div className="header">
                    <div onClick={this.activeClick.bind(this,0)} className={this.state.active === 0?'active':''}>按热度排序</div>
                    <div onClick={this.activeClick.bind(this,1)} className={this.state.active === 1?'active':''}>按时间排序</div>
                </div>
                <Content list={this.state.content} setSelfState={this.setSelfState.bind(this)} />
            </div>
        )
    }
}

export {commonHead}

index.css

body {
  padding: 30px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.common .title {
  font-weight: bold;
  margin-bottom: 20px;
}

.common .header {
  display: flex;
}

.common .header div {
  cursor: pointer;
  font-weight: bold;
  padding-bottom: 10px;
}

.common .header div.active {
  color: royalblue;
  border-bottom: 1px solid royalblue;
}

.common .header div:first-child {
  margin-right: 25px;
}

.content {
  align-items: flex-start;
  display: flex;
  margin: 30px 10px;
}

.content .img {
  margin-right: 20px;
  width: 50px;
  border-radius: 50%;
  height: 50px;
}

.content .right {
  display: flex;
  width: 100%;
}

.content .right textarea {
  width: 100%;
  padding: 10px;
  border: 0px;
  min-height: 50px;
  border-radius: 5px;
  background-color: #eee;
}

.content .right button {
  border: 0px;
  width: 80px;
  border-radius: 5px;
  color: #ffffff;
  padding: 10px;
  background-color: royalblue;
}

.core .right {
  justify-content: space-between;
  flex-direction: column;
}

.core .right .name {
  font-size: 12px;
}

.core .right .substance {
  margin: 5px 0;
}

.core .right .create-date {
  font-size: 10px;
  color: darkgray;
}

.core .right .line {
  border-bottom: 1px solid darkgray;
  margin-top: 15px;
}

.date-remove {
  display: flex;
}

.date-remove .remove {
  cursor: pointer;
  margin-left: 20px;
  font-size: 10px;
  color: red;
  opacity: 0.7;
}

项目下载：https://download.csdn.net/download/qq_27161847/86399363
预览：http://static-bde677f3-bc6a-4e10-a5bb-c942bc3ca59a.bspapp.com/