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. RGB-D相机视觉SLAM

    RGB-D相机视觉SLAM Dense Visual SLAM for RGB-D Cameras 开源代码地址:  vision.in.tum.de/data/software/dvo 摘要 本文提 ...

  2. YOLOV4各个创新功能模块技术分析（二）

    YOLOV4各个创新功能模块技术分析(二) 四.数据增强相关-GridMask Data Augmentation 论文名称:GridMask Data Augmentation 论文地址:https ...

  3. 全卷积网络Fully Convolutional Networks (FCN)实战

    全卷积网络Fully Convolutional Networks (FCN)实战 使用图像中的每个像素进行类别预测的语义分割.全卷积网络(FCN)使用卷积神经网络将图像像素转换为像素类别.与之前介绍 ...

  4. 基于C语言文件操作的学生成绩管理系统

    原理 在一个班级学生成绩管理系统中,希望处理每个学生的学习情况信息,其中包括学生的学号.姓名.各科名称和成绩等并能使管理人员通过界面完成对学生信息的录入及对学生信息的录入及对数据的查找.浏览.插入.排 ...

  5. GVS智能照明再下一城，前方到站贵阳地铁2号线！

    近期,"新基建"又频频刷屏,也为城轨交通建设快速发展提供了广阔的想象空间. 在新基建的导向作用下,越来越多城市加入地铁阵营.如果说普铁和高铁作为城市的发展窗口,那么地铁则是城市交通 ...

  6. ES2015+ 常用新特性一口气看个够

    ES2015 也叫 ES6,区别只是一个是以发布的年份来命名,一个是以版本号来命名 从那以后组织每年都会发布一个新版本,根据这个规则,ES2016 === ES7... ES2020 === ES11 ...

  7. FTP下载文件时拒绝登陆申请怎么办?

    1.有时候用网页登陆FTP无法下载文件,如下图 2.这时候就需要用文件夹登陆FTP,(打开我的电脑,然后输入ftp://10.2.41.31.如下图 然后就可以下载文件了

  8. redis实现分布式锁天然的缺陷

    redis分布式锁基本原理 采用 redis 实现分布式锁,主要是利用其单线程命令执行的特性,一般是 setnx, 只会有一个线程会执行成功,也就是只有一个线程能成功获取锁: 看着很完美 看看可能有什 ...

  9. git schnnel failed to receive handshake, SSLTLS connection failed

    git schnnel failed to receive handshake, SSLTLS connection failed 报错,查看原因为git安装时ssl选择的不是openssl.重新安装 ...

  10. Kubernetes之job

    1.运行单个任务的pod ReplicationController.ReplicaSet.DaemonSet会持续运行任务,永远达不到完成态 .这些 pod 中的进程在退出时会重新启动.但是在一个可 ...