React组件三大属性之 refs

refs属性
1) 组件内的标签都可以定义ref属性来标识自己
　　a. <input type="text" ref={input => this.msgInput = input}/>
　　b. 回调函数在组件初始化渲染完或卸载时自动调用
2) 在组件中可以通过this.msgInput来得到对应的真实DOM元素
3) 作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

事件处理
1) 通过onXxx属性指定组件的事件处理函数(注意大小写)
　　a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
　　b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2) 通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}

强烈注意
1) 组件内置的方法中的this为组件对象
2) 在组件类中自定义的方法中this为null
　　a. 强制绑定this: 通过函数对象的bind()
　　b. 箭头函数(ES6模块化编码时才能使用)

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/react.development.js"></script>

    <script src="../js/react-dom.development.js"></script>

    <script src="../js/babel.min.js"></script>

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

</head>

<body>

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

<script type="text/babel">

    /*

       需求: 自定义组件, 功能说明如下:

         1. 界面如果页面所示

         2. 点击按钮, 提示第一个输入框中的值

         3. 当第2个输入框失去焦点时, 提示这个输入框中的值

      */

    //1、定义组件

    class MyComponent extends React.Component {

        constructor(props) {

            super(props) // 调用父类(Component)的构造函数

            // 将自定义的函数强制绑定为组件对象

            this.handleClick = this.handleClick.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this

            this.handleBlur = this.handleBlur.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this

        }

        handleClick(){

            //官方不建议这么写

            const input = this.refs.content

            alert(input.value)

            //建议这么搞

            alert(this.x.value)

        }

        handleBlur(event){

            alert(event.target.value)

        }

        render() {

            return (

                <div>

                    <input type="text" ref="content"/>{' '}

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

                    <button onClick={this.handleClick}>提示输入数据</button>{' '}

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

                </div>

            )

        }

    }

    //2、渲染组件标签

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

</script>

</body>

</html>

React组件三大属性之 refs的更多相关文章

  1. React组件三大属性之 props

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

  2. React组件三大属性之state

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

  3. react的三大属性

    react的三大属性 state props  refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...

  4. React组件的属性

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

  5. 08_组件三大属性(2)_props

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 09_组件三大属性(3)_refs和事件处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 07_组件三大属性(1)_state

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

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

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

随机推荐

  1. 硬件delay评估表

    硬件delay评估表 硬件延时评估表用于快速评估一个模型在特定硬件环境和推理引擎上的推理速度. Bw 主要用于定义PaddleSlim支持的硬件延时评估表的格式. 概述 硬件延时评估表中存放着所有可能 ...

  2. HarmonyOS技术特性

    HarmonyOS技术特性 硬件互助,资源共享 多种设备之间能够实现硬件互助.资源共享,依赖的关键技术包括分布式软总线.分布式设备虚拟化.分布式数据管理.分布式任务调度等. 分布式软总线 分布式软总线 ...

  3. nvGRAPH API参考分析（二）

    nvGRAPH API参考分析(二) nvGRAPH Code Examples 本文提供了简单的示例. 1. nvGRAPH convert topology example void check( ...

  4. CodeGen准备存储库

    CodeGen准备存储库 CodeGen几乎总是与提供用于生成源文件的元数据的存储库结构一起使用,并且许多令牌需要使用存储库结构. 基本要求是有一个结构定义,并且该结构定义包含一个或多个字段定义.有些 ...

  5. 『言善信』Fiddler工具 — 8、Fiddler检查器（Inspectors）详解

    目录 1.请求报文内容 2.响应报文内容 3.响应报文中Transformer选项说明 Inspectors意思是检查器.Inspectors可以使用多种方式,查看请求的请求报文和响应报文相关信息. ...

  6. spring IOC DI AOP MVC 事务, mybatis 源码解读

    demo https://gitee.com/easybao/aop.git spring DI运行时序 AbstractApplicationContext类的 refresh()方法 1: pre ...

  7. 五、部署LNMP环境（linux + nginx + mysql + php）

    装包(nginx.数据库.php.php调用)---------起服务-----权限   装包: yum -y install gcc openssl-devel pcre-devel zlib-de ...

  8. 二、Nginx 服务器升级

      1,编译新版本的nginx 软件 [root@client lnmp_soft]# tar -xf nginx-1.12.2.tar.gz -C .. [root@client lnmp_soft ...

  9. Golang学习（用代码来学习） - 第三篇

    type Books struct { title string author string subject string id int } /** 结构体的学习 */ func struct_tes ...

  10. Golang通过结构体解析和封装XML

    Golang解析和封装XML 解析XML成结构体Demo package main import ( "encoding/xml" "fmt" ) //我们通过 ...