简单的评论功能
renderComment() {
if (this.state.comments.length === 0) {
return (
<div className='noComment'>暂无评论,快去评论吧~</div>
)
} else {
return (
<ul>
{this.state.comments.map(item => (
<li key={item.id}>
<p>评论人:{item.name}</p>
<p>评论内容:{item.content}</p>
</li>
))}
</ul>)
}
// return this.state.comments.length === 0
// ? (
// <div className='noComment'>暂无评论,快去评论吧~</div>
// )
// : (
// <ul>
// {this.state.comments.map(item => (
// <li key={item.id}>
// <p>评论人:{item.name}</p>
// <p>评论内容:{item.content}</p>
// </li>
// ))}
// </ul>
// )
}
comment = (e) => {
const { name, value } = e.target
this.setState({
[name]: value
})
}
sendcomment = () => {
//取状态参数
const { commentUserName, commentContent, comments } = this.state
// console.log(commentContent, commentUserName)
//判断是否为空
if (commentUserName.trim() === '' || commentContent.trim() === '') {
alert('请输入内容')
return
}
//构建新评论
const newComments = {
id: comments.length,
name: commentUserName,
content: commentContent
}
comments.push(newComments)
console.log(comments)
this.setState({
comments: comments,
commentContent: '',
commentUserName: ''
})
}
<div className='Header-logo'>
<div>
<input type="text" className='user' placeholder='请输入名字' value={commentUserName} name="commentUserName" onChange={this.comment} />
<br />
<textarea name="content" cols="30" rows="10" placeholder='请输入评论内容' value={commentContent} name="commentContent" onChange={this.comment}></textarea>
<br />
<button onClick={this.sendcomment}>发表评论</button>
</div>
{this.renderComment()}
</div>