评论功能实现（react）

简单的实现评论功能，能够进行添加删除评论。

import React,{Component} from "react";
import ReactDOM from 'react-dom';
class App extends Component{
    constructor(props) {
        super(props);
        this.state={
            message:'',
            list:[],
        };
    };
    changeValue=(e)=>{
        this.setState({
            message:e.target.value,
        });
    };
    addContent=()=>{
        const {message,list}=this.state;
        if(message.trim()===''){
            alert('请输入');
            return;
        }
        const newcomment={
            id:list.length>0?list[list.length-1].id+1:1,
            const:message,
            timestamp:new Date().toLocaleString(),
        };
        this.setState((prevstate)=>({
            list:[...prevstate.list,newcomment],
            message:'',
        }));
    };
    delContent=(id)=>{
        this.setState((prevstate)=>({
            list:prevstate.list.filter((item)=>item.id!==id),
        }));
    };

    render() {
        const {message,list}=this.state;
        return(
            <div>
                <h1>评论区</h1>
                <input
                type='text'
                value={message}
                placeholder={'请输入内容'}
                onChange={this.changeValue}
                />
                <button onClick={this.addContent}>评论</button>
                <h4>精彩评论</h4>
                <ul>
                    {list.map((item)=>(
                    <li key={item.id}>
                        <span>{item.content}</span>
                        <sapn>{item.timestamp}</sapn>
                        <button onClick={()=>this.delContent(item.id)}>删除</button>
                    </li>
                    ))}
                </ul>
            </div>
        );
    }4;
}
ReactDOM.render(<App/>,document.getElementById('root'));