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. 3D教育类小图标_三维立体学习类icon图标素材

    3D教育类小图标_三维立体学习类icon图标素材

  2. MySQL之数据定义语言(DDL)

    写在前面 本文中 [ 内容 ] 代表啊可选项,即可写可不写. SQL语言的基本功能介绍 SQL是一种结构化查询语言,主要有如下几个功能: 数据定义语言(DDL):全称Data Definition L ...

  3. [Qt] 信号和槽

    信号与槽:是一种对象间的通信机制 观察者模式:当某个事件发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal).这种发出是没有目的的,类似广播.如果有对象对这个信号感兴趣,它就 ...

  4. Linux创建RAID0_实战

    Linux创建RAID实战 一.Linux创建RAID0 RAID0俗称条带,它将两个或多个硬盘组成一个逻辑硬盘,容量是所有硬盘之和 因为是多个硬盘组合成一个,故可并行写操作,写入速度提高,但此方式硬 ...

  5. python3 ftplib模块连接FTP

    from ftplib import FTP_TLS import os import re class MyFtp(FTP_TLS): """继承FTP类"& ...

  6. 【odoo】【知识点】视图的继承逻辑

    背景:同一个模块,两组开发人员对同一个模型的form视图进行了二开.在没有指定外部ID的情况下,odoo是如何选择展示展示哪个视图呢? 上干货 odoo在加载视图的时候,首先调用的models.py中 ...

  7. 详述盒子模型（包含padding、border、margin的详细用法和描述）

    提起盒子模型,我想无论是对于一个前端资深开发人员还是前端入门开发人员来说都不陌生,这是CSS最基础的知识. 但是惭愧地说,我之前理解的盒子模型,只是文字上的理解.我知道定义一个元素的宽度和高度时,设置 ...

  8. python字典转bytes类型字典

    python字典转bytes类型字典import base64 import json 1. a={"Vod":{"userData":"{}&quo ...

  9. GO学习-(8) Go语言基础之数组

    Go语言基础之数组 Array(数组) 数组是同一种数据类型元素的集合. 在Go语言中,数组从声明时就确定,使用时可以修改数组成员,但是数组大小不可变化. 基本语法: // 定义一个长度为3元素类型为 ...

  10. 分层条件关系网络在视频问答VideoQA中的应用：CVPR2020论文解析

    分层条件关系网络在视频问答VideoQA中的应用:CVPR2020论文解析 Hierarchical Conditional Relation Networks for Video Question ...