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. 『动善时』JMeter基础 — 14、使用JMeter发送Post请求

    目录 1.Post请求参数类型说明 2.用于演示的项目说明 3.发送Post请求示例 (1)测试计划内包含的元件 (2)请求参数类型为x-www-form-urlencoded 4.请求参数form- ...

  2. 【vue2】(一)基础使用

    [vue2](一)基础使用 MVVM MVVM: View - Model - ViewModel View: Dom层,视图层 Model: Plain JavaScript Objects,数据层 ...

  3. Docker 中运行 ElasticSearch 和 Kibana

    ElasticSearch 是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口:Kibana 是一个开源的分析和可视化平台,可以搜索,查看. ...

  4. 【海通国际】Joe Lowry（Mr. Lithium）谈全球电池原材料供应危机

    [海通国际]Joe Lowry(Mr. Lithium)谈全球电池原材料供应危机 环球锂业公司(Global Lithium)总裁Joe Lowry日前接受了欧洲锰业Euro Manganese的邀请 ...

  5. 强哥jQuery学习笔记

    js对象: 1.js内置对象 2.js元素对象 3.jquery对象 js特效: 1.js元素对象 2.jQuery对象 jQuery学习: 1.核心函数 2.选择器 3.筛选 4.文档处理 5.属性 ...

  6. mysql 配置文件概述

    mysql 配置文件概述 mysql 配置文件 mysql 的配置文件为 /etc/my.cnf 配置文件查找次序:若在多个配置文件中均有设定,则最后找到的最终生效 /etc/my.cnf --> ...

  7. 013.Ansible Playbook include

    一 include 当项目越大,tasks越多的时候.如果将多有的task写入一个playbook中,可读性很差,就需要重新组织playbook 可以把一个playbook分成若干份晓得palyboo ...

  8. IT菜鸟之OSI七层模型

    OSI七层模型从下到上分别是: 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 第一层物理层: 物理层是传输媒介(网线.无线.光纤) 在线路中起到的作用:是将0/1转换成电信号或光信号 物 ...

  9. linux服务器环境安全防范教程

    一.目录权限设置很重要:可以有效防范黑客上传木马文件. 如果通过 chmod 644 * -R 的话,php文件就没有权限访问了. 如果通过chmod 755 * -R 的话,php文件的权限就高了. ...

  10. flink的checkpoint页面监控

    flink web页面中提供了针对Job Checkpoint相关的监控信息.Checkpoint监控页面共有overview.history.summary和configuration四个页签,分别 ...