react的三大属性 state props  refs

  • props 来自外部属性
  • states 来自内部状态
  • refs 用于表示组件内某个元素

state基础（最重要的属性）

  • state是组件对象最重要的属性，其值是对象，即可以包含多个数据
  • 可以通过更新组件的state来更新对应的页面的显示（重新进行组件渲染）

state 操作　　

　　初始化状态　

constructor(props){

    super(props)

    this.state = { //this是一个组件对象

        stateProp1: value1,

        stateProp2: value2

    }

}

　　　

　　读取某个状态值

this.state.statePropertyName

　　

　　更新状态，组件界面更新

this.setState({

    stateProp1: value1,

    stateProp2: value2

})

state属性示例–监听点击事件，然后状态改变

定义组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="test"></div>

    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">

       class Myname extends React.Component {

        constructor (props) {

                //调用父类的构造函数

                super(props)

                //1、初始化状态——固定写法

                this.state = {

                    isMyname: true

                  }

                //[注意]将新增的方法中的this强制绑定为组件对象_bind()方法产生一个与handleClick()一样的方法

                this.change = this.change.bind(this)

            }

            //新增自定义方法:内部的this默认不是组件对象，而是undefined

            change () {

                //3、更新状态，需要让this指向组件对象

               this.setState({

                isMyname: !this.state.isMyname

              })

            }

            //重写组件类方法

            render () {

                const text = this.state.isMyname ? '我是ImagineCode' : '哈哈哈'

                return <h2 onClick={this.change}>{text}</h2>

              }

        }

        ReactDOM.render(<Myname />, document.getElementById('test'))

    </script>

</body>

</html>

props 属性

作用：复用

案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="test1"></div>

    <div id="test2"></div>

    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script src="../js/prop-types.js"></script>

    <script type="text/babel">

    //    1、定义组件:方式1

    function Person(props) {

        return (

            <ul>

                <li>name：{props.name}</li>

                <li>age：{props.age}</li>

                <li>sex：{props.sex}</li>

            </ul>

        )

    }

    //方式2：使用类方式定义组件（运行时请将其中一个方式注释）

    class Person extends React.Component {

        render() {

            return (

                <ul>

                <li>name：{this.props.name}</li>

                <li>age：{this.props.age}</li>

                <li>sex：{this.props.sex}</li>

            </ul>

            )

        }

    }

    //指定默认值

    Person.defaultProps = {

        name:'imaginecode',

        age: 17,

        sex:'woman'

    }

    //指定属性值的类型和必要性--使用prop-types.js库

    Person.propTypes = {

        name:PropTypes.string.isRequired,

        age:PropTypes.number.isRequired,

    }

    // 2、渲染组件标签

    const p1 = {

        name:'imaginecode',

        age: 19,

        sex:'man'

    }

    ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1'));

    const p2 = {

        name:'imaginecode2'

    }

    ReactDOM.render(<Person name={p2.name}/>,document.getElementById('test2'));

    </script>

</body>

</html>

　　为组件指定默认属性值，组件属性defaultProps：

Person.defaultProps = {name:''}

　　

　　对props中的属性值进行类型限制和必要性限制,组件属性propTypes：

Person.propTypes = {

    name:PropTypes.string.isRequired,

    age:PropTypes.number.isRequired

}

　

refs 属性

（1）ref用于标识组件内部某个元素

（2）refs 是标识集合

　示例　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="text1"></div>

    <div id="text2"></div>

    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script src="../js/prop-types.js"></script>

    <script type="text/babel">

        //1、先定义组件

        class InputComp extends React.Component {

            constructor(props) {

                super(props)

                //先对自定义函数进行bind操作

                this.showInput = this.showInput.bind(this);

                this.handleBlur = this.handleBlur.bind(this);

            }

            showInput(event) {

                console.log(this);

                alert(this.inputVal.value);

            }

            handleBlur(event) {//利用所有的事件均有一个event属性

                alert(event.target.value);

            }

            render() {

                return(

                    //this.inputVal=input 将当前input绑定到组件对象上。input代表当前这个input元素

                    <div>

                        <input type="text" ref={input => this.inputVal=input}/>

                        <button onClick={this.showInput}>点击获取值</button>

                        <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>

                    </div>

                )

            }

        }

        //2、渲染组件标签

        ReactDOM.render(<InputComp />,document.getElementById('text1'));

    </script>

</body>

</html>

react的三大属性的更多相关文章

  1. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  4. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  5. 组件的三大属性state，props，refs与事件处理

    组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...

  6. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  7. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  8. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  9. React Native声明属性和属性确认

    属性声明 因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候 ...

随机推荐

  1. [bug] org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input length = 2

    原因 SpringBoot启动加载yml配置文件出现编码格式错误 参考 https://www.pianshen.com/article/2431144034/

  2. [刷题] PTA 02-线性结构3 Reversing Linked List

    链表逆序 1 #include<iostream> 2 #include<stdio.h> 3 #include<algorithm> 4 using namesp ...

  3. 搭建LAMP环境部署discuz论坛

    !!!什么是LAMP: LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写: Linux,操作系统 Apache,网页服务器 MariaDB或MySQL,数据库管理系统(或者 ...

  4. nginx 的三种虚拟主机配置方法

    nginx三种虚拟主机配置的方法. 基于端口 在生产环境中一般使用端口或者域名. [root@web01 /etc/nginx/conf.d]# cat web01.conf server { lis ...

  5. Linux中级之ansible配置（playbook）

    一.playbooks 如果用模块形式一般有幂等性,如果用shell或者command没有幂等性 playbooks相当于是shell脚本,可以把要执行的任务写到文件当中,一次执行,方便调用 task ...

  6. 贪心算法leetcode-763

    int[] lastShow = new int[26]; var list = new LinkedList<Integer>(); for (int i = 0; i < s.l ...

  7. elasticsearch_dsl 操作

    import elasticsearch from elasticsearch_dsl import Search, MultiSearch # Search-执行一个搜索,MultiSearch-同 ...

  8. Resnet-50网络结构详解

    解决的问题: 由于梯度消失,深层网络很难训练.因为梯度反向传播到前面的层,重复相乘可能使梯度无穷小.结果就是,随着网络的层数更深,其性能趋于饱和,甚至迅速下降. 核心思想: 引入一个恒等快捷键(也称之 ...

  9. JAVA并发(5)-并发队列LinkedBlockingQueue的分析

    本文介绍LinkedBlockingQueue,这个队列在线程池中常用到.(请结合源码,看本文) 1. 介绍 LinkedBlockingQueue, 不支持null,基于单向链表的可选有界阻塞队列. ...

  10. toFixed奇葩问题

    1.浮点数运算后的精度问题 在计算商品价格加减乘除时,偶尔会出现精度问题 // 加法 ===================== 0.1 + 0.2 = 0.30000000000000004 0.7 ...