发表评论

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. asp.net 可视化操作(二)——Sql数据库连接及简单查询功能的实现

    目录 连接数据库 利用repeater控件实现数据显示 查询功能 页面CSS美化 数据插入.更新-- 连接数据库 添加test.aspx 添加控件SqlDataSource,选择配置数据源 选择新建连 ...

  2. led指示灯电路图大全(八款led指示灯电路设计原理图详解)

    led指示灯电路图大全(八款led指示灯电路设计原理图详解) led指示灯电路图(一) 图1所示电路中只有两个元件,R选用1/6--1/8W碳膜电阻或金属膜电阻,阻值在1--300K之间. Ne为氖泡 ...

  3. FR9833 32V转5V

  4. 纹理集打包和动画转换工具Texture Merge的使用教程

    Texture Merger 可将零散纹理拼合为整图,同时也可以解析SWF.GIF动画,制作Egret位图文本,导出可供Egret使用的配置文件,其纹理集制作功能在小游戏开发中可以起到降低小游戏包体的 ...

  5. 微信小程序登录鉴权流程图

  6. EL表达式详解(常用表达式以及取值)

    EL表达式 学习总结 一. El表达式概念 二. El中的表达式 1. 算术表达式 2. 比较表达式 3. 逻辑表达式 4. 三元表达式 5. 判空表达式 三.EL 从四个作用域中取值 1. 概念 2 ...

  7. 底部footer挡住上面内容的bug

    当设置底部footer的样式为: .footer{ position: fixed; height: 49px; bottom: 0; background: #fff; } 这样会挡住上面的内容,修 ...

  8. FreeSql的各种工程demo上新啦

    FreeSql的各种工程demo GitHub | Gitee console,winforms nf461,vb,wpf,webapi,workerSevice,signalIR xamarinFo ...

  9. MySQL安装配置教程(超级详细)

    一. 下载MySQL Mysql官网下载地址:https://downloads.mysql.com/archives/installer/ 1. 选择要安装的版本,本篇文章选择的是5.7.31版本, ...

  10. vivo 短视频推荐去重服务的设计实践

    一.概述 1.1 业务背景 vivo短视频在视频推荐时需要对用户已经看过的视频进行过滤去重,避免给用户重复推荐同一个视频影响体验.在一次推荐请求处理流程中,会基于用户兴趣进行视频召回,大约召回2000 ...