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'))