99 lines
3.2 KiB
Markdown
99 lines
3.2 KiB
Markdown
|
```html
|
||
|
|
import React from "react";
|
||
|
|
|
||
|
|
class CommentList extends React.Component {
|
||
|
|
state = {
|
||
|
|
comments: [
|
||
|
|
// { id: 1, name: 'shi', content: '沙发' },
|
||
|
|
// { id: 2, name: 'xiao', content: '板凳' },
|
||
|
|
// { id: 3, name: 'hua', content: '地板' }
|
||
|
|
],
|
||
|
|
userName:'',
|
||
|
|
userContext:''
|
||
|
|
}
|
||
|
|
renderList() {
|
||
|
|
const {comments}= this.state
|
||
|
|
if (comments.length === 0) {
|
||
|
|
return (<div className="no-Comment">暂无评论</div>)
|
||
|
|
}
|
||
|
|
return (<ul>
|
||
|
|
{
|
||
|
|
comments.map(item => (
|
||
|
|
<li key={item.id}>
|
||
|
|
<h4>评论人:{item.name}</h4>
|
||
|
|
<p>评论:{item.content}</p>
|
||
|
|
</li>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</ul>)
|
||
|
|
// return this.state.comments.length === 0 ? (<div className="no-Comment">暂无评论</div>) :
|
||
|
|
// (<ul>
|
||
|
|
// {
|
||
|
|
// this.state.comments.map(item => (
|
||
|
|
// <li key={item.id}>
|
||
|
|
// <h4>评论人:{item.name}</h4>
|
||
|
|
// <p>评论:{item.content}</p>
|
||
|
|
// </li>
|
||
|
|
// ))
|
||
|
|
// }
|
||
|
|
// </ul>)
|
||
|
|
|
||
|
|
}
|
||
|
|
handleForm=(e)=>{
|
||
|
|
const {name,value}= e.target
|
||
|
|
this.setState({
|
||
|
|
[name]:value
|
||
|
|
})
|
||
|
|
}
|
||
|
|
addComment=()=>{
|
||
|
|
const {comments,userName,userContext}= this.state
|
||
|
|
// 非空校验
|
||
|
|
if(userName.trim()===""||userContext.trim()===""){
|
||
|
|
alert('请输入评论内容')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const newComments = [{
|
||
|
|
id:Math.random(),
|
||
|
|
name:userName,
|
||
|
|
content:userContext
|
||
|
|
},...comments]
|
||
|
|
this.setState({
|
||
|
|
comments:newComments,
|
||
|
|
// 清空文本空
|
||
|
|
userContext:'',
|
||
|
|
userName:''
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {userName,userContext}= this.state
|
||
|
|
return (
|
||
|
|
<div className="app">
|
||
|
|
<div>
|
||
|
|
<input className="user" type="text" name="userName" value={userName} placeholder="请输入评论人" onChange={this.handleForm} />
|
||
|
|
<br />
|
||
|
|
<textarea className="content" cols="30" rows="10" name="userContext" value={this.state.userContext} placeholder="请输入评论内容" onChange={this.handleForm} />
|
||
|
|
<br />
|
||
|
|
<button onClick={this.addComment}>发表评论内容</button>
|
||
|
|
</div>
|
||
|
|
{/* {this.state.comments.length === 0 ? (<div className="no-Comment">暂无评论</div>) :
|
||
|
|
(<ul>
|
||
|
|
{
|
||
|
|
this.state.comments.map(item => (
|
||
|
|
<li key={item.id}>
|
||
|
|
<h4>评论人:{item.name}</h4>
|
||
|
|
<p>评论:{item.content}</p>
|
||
|
|
</li>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</ul>)
|
||
|
|
} */}
|
||
|
|
{this.renderList()}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default CommentList
|
||
|
|
```
|