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'));
登录功能(react)
于 2024-01-02 08:09:40 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)