好客租房44-react组件基础综合案例-5发表评论-1
发表评论
1给按钮绑定点击事件
2在事件处理程序中 通过state获取评论信息
3将评论信息添加到state中 并调用setState()方法更新数据
//导入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]
this.setState({
comments:newComents
})
}
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'))
好客租房44-react组件基础综合案例-5发表评论-1的更多相关文章
- 好客租房43-react组件基础综合案例-4获取评论信息
获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...
- 好客租房40-react组件基础综合案例-案例需求分析
实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ...
- 好客租房45-react组件基础综合案例-6边界问题
边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...
- 好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...
- 好客租房42-react组件基础综合案例-渲染列表无数据并优化
渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
- react第十九单元(react+react-router-dom+redux综合案例1)
第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...
- Ext.js入门:常用组件与综合案例(七)
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
- React组件开发经典案例--todolist
点开查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
随机推荐
- asp.net 可视化操作(二)——Sql数据库连接及简单查询功能的实现
目录 连接数据库 利用repeater控件实现数据显示 查询功能 页面CSS美化 数据插入.更新-- 连接数据库 添加test.aspx 添加控件SqlDataSource,选择配置数据源 选择新建连 ...
- led指示灯电路图大全(八款led指示灯电路设计原理图详解)
led指示灯电路图大全(八款led指示灯电路设计原理图详解) led指示灯电路图(一) 图1所示电路中只有两个元件,R选用1/6--1/8W碳膜电阻或金属膜电阻,阻值在1--300K之间. Ne为氖泡 ...
- FR9833 32V转5V
- 纹理集打包和动画转换工具Texture Merge的使用教程
Texture Merger 可将零散纹理拼合为整图,同时也可以解析SWF.GIF动画,制作Egret位图文本,导出可供Egret使用的配置文件,其纹理集制作功能在小游戏开发中可以起到降低小游戏包体的 ...
- 微信小程序登录鉴权流程图
- EL表达式详解(常用表达式以及取值)
EL表达式 学习总结 一. El表达式概念 二. El中的表达式 1. 算术表达式 2. 比较表达式 3. 逻辑表达式 4. 三元表达式 5. 判空表达式 三.EL 从四个作用域中取值 1. 概念 2 ...
- 底部footer挡住上面内容的bug
当设置底部footer的样式为: .footer{ position: fixed; height: 49px; bottom: 0; background: #fff; } 这样会挡住上面的内容,修 ...
- FreeSql的各种工程demo上新啦
FreeSql的各种工程demo GitHub | Gitee console,winforms nf461,vb,wpf,webapi,workerSevice,signalIR xamarinFo ...
- MySQL安装配置教程(超级详细)
一. 下载MySQL Mysql官网下载地址:https://downloads.mysql.com/archives/installer/ 1. 选择要安装的版本,本篇文章选择的是5.7.31版本, ...
- vivo 短视频推荐去重服务的设计实践
一.概述 1.1 业务背景 vivo短视频在视频推荐时需要对用户已经看过的视频进行过滤去重,避免给用户重复推荐同一个视频影响体验.在一次推荐请求处理流程中,会基于用户兴趣进行视频召回,大约召回2000 ...