好客租房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 ...
随机推荐
- JS 用状态机的思想看Generator之基本语法篇
前言 最近学习了阮一峰老师的<ECMAScript 6 入门>里的Generator相关知识,以及<你不知道的JS>中卷的异步编程部分.同时在SegmentFault问答区看到 ...
- visio2019专业版激活码
这里面有 : 最新Project2019+ Visio2019专业增强版和专业版永久激活密钥分享 (weibo.com)
- java中StringTokenizer的用法
4.StringTokenizer StringTokenizer可以解析分隔符不是空格的情况.例子:import java.util.StringTokenizer;public class Tes ...
- java中对象属性可以是另外一个对象或对象的参考
7.对象的属性可以是另外一个对象或对象的参考 通过这种方法可以迅速构建一个比较大的系统. class Motor { Light[] lights; Handle left, ri ...
- node安装和环境配置
参考链接: https://www.cnblogs.com/zwjphp/p/14123746.html 一.安装环境 1.本机:Windows 10 (64位) 2.Node.js:v12.13.0 ...
- 适配手机端rpx像素
<script src="static/js/adaptive.js"></script> <script type="text/javas ...
- 库存管理系统实现 C语言课设
1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <string.h> 4 5 //定义一个商品结构体 6 ...
- linux中查看端口号使用情况
百度一圈,以下是整理来的操作命令. 1.netstat -anp |grep (端口号) 这个方法可以直观看到对应端口号是否被使用. 2.netstat -nultp 这个方法可以看到该机上所有以用的 ...
- Linux Red Hat 8.0虚拟机安装过程
Linux Red Hat 8.0虚拟机安装过程 一.安装虚拟机所需要的工具: 1.VMware Workstation Pro 2.Red Hat 8.0 虚拟机镜像 3.还有一个就是VMware的 ...
- STL空间分配器源码分析(一)
一.摘要 STL的空间分配器(allocator)定义于命名空间std内,主要为STL容器提供内存的分配和释放.对象的构造和析构的统一管理.空间分配器的实现细节,对于容器来说完全透明,容器不需关注内存 ...