状态是改变的

语法:this.setstate

千万不要直接改变this.setState

setState 修改state 更新ui

数据驱动视图

//导入react
    import React from 'react'
     
    import ReactDOM from 'react-dom'
    //导入组件
     
    // 约定1:类组件必须以大写字母开头
     
    // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
     
    // 约定3:组件必须提供render方法
     
    // 约定4:render方法必须有返回值
     
    class HelloWorld extends React.Component {
        //初始化state
        state = {
            geyao: 0,
        }
     
        render() {
            return (
                <div>
                    <h1>{this.state.geyao}</h1>
                    <button
                        onClick={() => {
                            this.setState({
                                geyao: this.state.geyao + 1,
                            })
                        }}
                    >
                        点击加一
                    </button>
                </div>
            )
        }
    }
     
    ReactDOM.render(<HelloWorld />, document.getElementById('root'))

好客租房28-state和this.setState(this.setState修改状态)的更多相关文章

  1. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

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

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

  3. 好客租房44-react组件基础综合案例-5发表评论-1

    发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...

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

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

  5. 好客租房32-事件绑定this指向(class实例方法)

    class实例方法 利用箭头函数的class实例方法 //导入react import React from 'react'   import ReactDOM from 'react-dom' // ...

  6. 好客租房33-事件绑定this指向(总结)

    1推荐使用class的实例方法 //导入react import React from 'react'   import ReactDOM from 'react-dom' //导入组件   // 约 ...

  7. 好客租房19-react组件基础目标

    1能够使用函数创建组件 2能够使用class创建组件 3能够给react元素绑定事件 4能够使用state和setstate 5能够处理事件中的this指向问题 6能够使用受控组件处理表单

  8. 好客租房29-从jsx中抽离事件处理程序

    从jsx中抽离过多js逻辑代码 会显得非常混乱 推荐:将逻辑抽离到单独的方法中 保证jsx结构清晰 //导入react     import React from 'react'           ...

  9. 好客租房30-事件绑定this指向(箭头函数)

    1箭头函数 利用箭头函数自身不绑定this的特点 //导入react     import React from 'react'           import ReactDOM from 'rea ...

随机推荐

  1. matlab拟合函数的三种方法

    方法一:多项式拟合polyfit 1 x=[1 2 3 4 5 6 7 8 9]; 2 3 y=[9 7 6 3 -1 2 5 7 20]; 4 P= polyfit(x, y, 3) %三阶多项式拟 ...

  2. 14_Nonlinear Basic Feedback Stabilization_非线性系统稳定性设计

    非线性系统线性化的方式:泰勒展开近似线性化(2_线性化_泰勒级数_泰勒公式_Linearization).反馈线性化,本文使用的是反馈线性化 从图中可知道输入u非常大达到了900多,所以直接使用u消去 ...

  3. 前端面试题整理——普通函数和new函数

    下列代码的输出值: function A() { console.log(1) } function fn() { A = function () { console.log(2) } return ...

  4. 将word文件转为excel文件

    有些word文件里的数据是有顺序或者规律,想转成表格的形式,下面就以我要转的word为例. 我的word文件是这样的 1.word转txt(文本文件) 文件--->另存为--->路径--- ...

  5. 【零碎小bug系列】安卓开发是遇到空指针异常java.lang.NullPointerException: Attempt to invoke...

    安卓开发是遇到空指针异常 java.lang.NullPointerException: Attempt to invoke virtual method 'android.text.Editable ...

  6. 拼写检查-c++

    [问题描述] 作为一个新的拼写检查程序开发团队的成员,您将编写一个模块,用已知的所有形式正确的词典来检查给定单词的正确性.        如果字典中没有这个词,那么可以用下列操作中的一个来替换正确的单 ...

  7. k8s,coredns内部测试node节点上的pod的calico是否正常的一个小技巧

    最近由于master整个挂掉,导致相关一些基础服务瘫掉,修复中测试有些节点网络又出现不通的情况正常的启动相关一些服务后,测试一些节点,比较费劲,还有进入pod,以及还有可能涉及命名空间操作这里可以这样 ...

  8. ArrayList扩容问题

    今天上午上课在看JavaSE的面经,其中有问关于ArrayList和LinkedList的区别,就突然思考到,既然ArrayList是采用数组形式存储数据,对比我们自己使用到的数组,为什么ArrayL ...

  9. Java学习day32

    生产与消费者问题:假设仓库中只能存放一件产品,生产者将生产出来的产品放入仓库,消费者从仓库中取走产品:如果仓库中没有产品,生产者就将产品放入仓库,否则就停止生产等待:如果仓库中有产品,消费者就取走,否 ...

  10. python基础练习题(斐波那契数列)

    day4 --------------------------------------------------------------- 实例006:斐波那契数列 题目 斐波那契数列. 题目没说清楚, ...