好客租房45-react组件基础综合案例-6边界问题
边界问题
//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class HelloWorld extends React.Component {
//初始化状态
state = {
comments: [
{
id: 1,
name: 'geyao',
content: '哈哈',
},
{
id: 2,
name: 'fangfang',
content: '哈哈',
},
{
id: 3,
name: 'geyao',
content: '哈哈',
},
],
userName: '',
userContent: '',
}
//修改表单元素
handleForm = (e) => {
const { name, value } = e.target
this.setState({
[name]: value,
})
}
//添加信息
addComment=()=>{
const { comments,userName, userContent } = this.state
const newComents=[{
id:Math.random(),
name:userName,
content:userContent
},...comments]
if(userName.trim()===""||!userContent.trim()===""){
alert("评论人和评论列表不能为空")
return false
}
this.setState({
comments:newComents,
userContent:"",
userName:""
})
}
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}
></textarea>
<br />
<button onClick={this.addComment}>发表评论</button>
</div>
{this.state.comments.length === 0 ? (
<div className="no-comment">暂无评论,快去评论吧~</div>
) : (
<ul>
{/* <li>
<h3>评论人:jack</h3>
<h3>评论内容:沙发</h3>
</li> */}
{this.state.comments.map((item) => (
<li key={item.id}>
<h3>评论人:{item.name}</h3>
<p>评论内容:{item.content}</p>
</li>
))}
</ul>
)}
</div>
)
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
运行结果
最新文章
- Android模拟器操作快捷键
- Jquery中去除左右空格
- 【POJ2352】【树状数组】Stars
- HDU 5009 Paint Pearls (动态规划)
- echarts配合循环计时器等出现的内存泄漏
- perl的USE和require
- 分类导航菜单的制作(附源码)--HTML
- Lua编写wireshark插件初探——解析Websocket上的MQTT协议
- BZOJ3638[Codeforces280D]k-Maximum Subsequence Sum&;BZOJ3272Zgg吃东西&;BZOJ3267KC采花——模拟费用流+线段树
- 【Eclipse】Eclipse 安装 SVN 插件的三种方法
- thinkphp5整合 gatewaywork实现聊天
- erlang otp中的socket参数设置
- Spark高级数据分析&#183; 6LSA
- Spring学习(一) IoC
- Docker安装和使用Tomcat
- Hadoop(20)-MapReduce框架原理-OutputFormat
- HIVE- 大数据运维之hive管理
- html5标签的兼容性处理
- Linux mm相关的问题
- 编译安装php、nginx