代码展示
import React from 'react'
import ReactDOM from 'react-dom'
/*
评论列表案例
comments: [
{ id: 1, name: 'jack', content: '沙发!!!' },
{ id: 2, name: 'rose', content: '板凳~' },
{ id: 3, name: 'tom', content: '楼主好人' }
]
*/
import './index.css'
class App extends React.Component {
// 初始化状态
state = {
comments: [
{ id: 1, name: 'jack', content: '沙发!!!' },
{ id: 2, name: 'rose', content: '板凳~' },
{ id: 3, name: 'tom', content: '楼主好人' }
],
// 评论人
userName: '',
// 评论内容:
userContent: ''
}
// 渲染评论列表:
renderList() {
const { comments } = this.state
if (comments.length === 0) {
return <div className="no-comment">暂无评论,快去评论吧~</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
})
}
// 发表评论:
addComment = () => {
const { comments, userName, userContent } = this.state
// console.log(userName, userContent)
if(userName.trim() === '' || userContent.trim() === ''){
alert('请输入评论人或者评论内容')
return
}
// 将评论信息添加到state中
const newComments = [
{
id: Math.random(),
name: userName,
content: userContent
},
...comments
]
// console.log(newComments)
this.setState({
comments: newComments,
userName:'',
userContent:''
})
}
render() {
const { userName, userContent } = this.state
return (
<div className="app">
<div>
<input
className="user"
type="text"
placeholder="请输入评论人"
value={userName}
name="userName"
onChange={this.handleForm}
/>
<br />
<textarea
className="content"
cols="30"
rows="10"
placeholder="请输入评论内容"
value={userContent}
name="userContent"
onChange={this.handleForm}
/>
<br />
<button onClick={this.addComment}>发表评论</button>
</div>
{/* 通过条件渲染决定渲染什么内容: */}
{this.renderList()}
</div>
)
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))