发表评论

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的更多相关文章

  1. 好客租房43-react组件基础综合案例-4获取评论信息

    获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...

  2. 好客租房40-react组件基础综合案例-案例需求分析

    实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ...

  3. 好客租房45-react组件基础综合案例-6边界问题

    边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...

  4. 好客租房41-react组件基础综合案例-渲染列表数据

    1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...

  5. 好客租房42-react组件基础综合案例-渲染列表无数据并优化

    渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...

  6. react第二十单元(react+react-router-dom+redux综合案例2)

    第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业

  7. react第十九单元(react+react-router-dom+redux综合案例1)

    第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...

  8. Ext.js入门:常用组件与综合案例(七)

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

  9. React组件开发经典案例--todolist

    点开查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

随机推荐

  1. JS 用状态机的思想看Generator之基本语法篇

    前言 最近学习了阮一峰老师的<ECMAScript 6 入门>里的Generator相关知识,以及<你不知道的JS>中卷的异步编程部分.同时在SegmentFault问答区看到 ...

  2. visio2019专业版激活码

    这里面有    :  最新Project2019+ Visio2019专业增强版和专业版永久激活密钥分享 (weibo.com)

  3. java中StringTokenizer的用法

    4.StringTokenizer StringTokenizer可以解析分隔符不是空格的情况.例子:import java.util.StringTokenizer;public class Tes ...

  4. java中对象属性可以是另外一个对象或对象的参考

    7.对象的属性可以是另外一个对象或对象的参考   通过这种方法可以迅速构建一个比较大的系统. class Motor {     Light[] lights;     Handle left, ri ...

  5. node安装和环境配置

    参考链接: https://www.cnblogs.com/zwjphp/p/14123746.html 一.安装环境 1.本机:Windows 10 (64位) 2.Node.js:v12.13.0 ...

  6. 适配手机端rpx像素

    <script src="static/js/adaptive.js"></script> <script type="text/javas ...

  7. 库存管理系统实现 C语言课设

    1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <string.h> 4 5 //定义一个商品结构体 6 ...

  8. linux中查看端口号使用情况

    百度一圈,以下是整理来的操作命令. 1.netstat -anp |grep (端口号) 这个方法可以直观看到对应端口号是否被使用. 2.netstat -nultp 这个方法可以看到该机上所有以用的 ...

  9. Linux Red Hat 8.0虚拟机安装过程

    Linux Red Hat 8.0虚拟机安装过程 一.安装虚拟机所需要的工具: 1.VMware Workstation Pro 2.Red Hat 8.0 虚拟机镜像 3.还有一个就是VMware的 ...

  10. STL空间分配器源码分析(一)

    一.摘要 STL的空间分配器(allocator)定义于命名空间std内,主要为STL容器提供内存的分配和释放.对象的构造和析构的统一管理.空间分配器的实现细节,对于容器来说完全透明,容器不需关注内存 ...