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. Clang：LLVM的C语言家族前端

    Clang:LLVM的C语言家族前端 Clang项目为LLVM 项目的C语言家族(C,C ++,Objective C / C ++,OpenCL,CUDA和RenderScript)中的语言提供了语 ...

  2. 免费版对象存储【minIO】CentOS部署实践记录 2021

    好久没写,记录一下 1.背景 之前一直用的七牛,不过是收费的,然后有些定制化需求,可能比较看重预算,然后就有了这篇开源方式:minio 2.简介 官方文档:http://docs.minio.org. ...

  3. Eclipse安装Pydev插件时所遇到的问题

    安装pydev插件折腾了半天,因为总是安装不成功,不成功的表现就是:windows-preferences设置里没有pydev 由于第一次安装这个插件所以不了解安装pydev插件的版本是有要求的,根据 ...

  4. 关于kubernetes的十七个实验（二）

    写在开头 时隔好几天,结束了毕业设计中期答辩,更新第二节. 实验二与Kubeadm Kubeadm解决了以下问题:处理TLS加密配置,部署核心Kubernetes组件并确保其他节点可以轻松加入集群. ...

  5. Oracle简单分析

    1.Oracle 数据库是甲骨文公司开发的一种关系型数据库管理系统,也就是RDBMS(relational database management system). 2.Oracle 从头到尾都是一个 ...

  6. vivo商城促销系统架构设计与实践-概览篇

    一.前言 随着商城业务渠道不断扩展,促销玩法不断增多,原商城v2.0架构已经无法满足不断增加的活动玩法,需要进行促销系统的独立建设,与商城解耦,提供纯粹的商城营销活动玩法支撑能力. 我们将分系列来介绍 ...

  7. Centos7安装配置jenkins（Tomcat）

    Centos7安装配置jenkins(Tomcat) 一.准备工作 1.1 安装JDK1.8 具体安装过程不在赘述. 1.2 下载jenkins的war包 jenkins官网下载地址:https:// ...

  8. Kubernetes使用节点污点和pod容忍度阻止节点调度到特定节点

    Kubernetes允许你去影响pod被调度到哪个节点.起初,只能通过在pod规范里指定节点选择器来实现,后面其他的机制逐渐加入来扩容这项功能,本章将包括这些内容. 现在要介绍的高级调度的两个特性是节 ...

  9. 乘风破浪，Windows11设计和开发指导，全新图标字体和云母材质

    Windows11全新的布局设计 Windows 11全新的布局设计已设计为支持现代应用体验.渐进的圆角.嵌套元素和一致的排水沟相结合,营造出柔和.平静.平易近人的效果,强调目的的统一和易用性. ht ...

  10. Qt之先用了再说系列-信号与槽

    QT之信号与槽 简介:信号与槽可是Qt最大成功点,也是整个Qt基本核心机制,如果不会信号与槽,将无法领略Qt之美: 1.信号与槽函数原型: QObject::connect(const QObject ...