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. YOLO v1到YOLO v4（上）

    YOLO v1到YOLO v4(上) 一.  YOLO v1 这是继RCNN,fast-RCNN和faster-RCNN之后,rbg(RossGirshick)针对DL目标检测速度问题提出的另外一种框 ...

  2. nvGRAPH API参考分析（一）

    nvGRAPH API参考分析(一) 本文通过描述nvGRAPH库函数的输入/输出参数,数据类型和错误代码来指定其行为. 1.    返回值nvgraphStatus_t 除以下内容外,所有nvGRA ...

  3. 我的N年软件测试感悟

    1.前言 大家好!我是Meng前段时间,很荣幸被一合作伙伴邀请发表一篇文章,主题为"这些年,我所从事软件测试的一些感悟",正好趁着这个机会,我也好好总结一下. 2.测试培训 对于软 ...

  4. 学废了系列 - WebGIS vs WebGL图形编程

    目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积 ...

  5. 【NX二次开发】Block UI 目录

    Block UI 目录  基本   标签/位图   切换开关   枚举   字符串   多行字符串   操作按钮   列表框   分割线   对象颜色选择器   RGB颜色选择器   绘图区   图层 ...

  6. JavaScript 中的延迟加载属性模式

    传统上,开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性.对于在构造函数中随时可用的小块数据来说,这不是问题.但是,如果在实例中可用之前需要计算某些数据,您可能不想预先支付该费 ...

  7. 基于 Spring Security 的前后端分离的权限控制系统

    话不多说,入正题.一个简单的权限控制系统需要考虑的问题如下: 权限如何加载 权限匹配规则 登录 1.  引入maven依赖 1 <?xml version="1.0" enc ...

  8. Hdoop

    优势:1.低成本  2.高扩展 3.成熟的生态圈 1.安装虚拟机 vi /etc/profile

  9. 安装redHat6.5详细图文教程

    ​ ​ 进入VM虚拟机,双击进入已经创建好的红帽6虚拟机 双击进入CD/DVD,准备添加红帽6.5的iso镜像文件 [红帽6.5的iso镜像文件需要先下载,redhat_6.5下载地址:https:/ ...

  10. centos7安装JDK、CentOS

    1.安装JDK 1.1查看系统是否已有自带的JDK rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 1.2卸载已有安装 如果没有输出信息, ...