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. 【译】.NET 5 中的诊断改进

    基于我们在 .NET Core 3.0 中引入的诊断改进,我们一直在努力进一步改进这个领域.我很高兴介绍下一波诊断改进. 诊断工具不再需要 .NET SDK 直到最近,.NET 诊断工具套件还只能作为 ...

  2. JUC 并发编程--12, 使用AtomicInteger 实现一把锁(排队自旋锁), 代码演示

    前面 使用自旋锁实现了一把锁,(请看 第5篇) volatile 三大特性: 可见性, 不保证原子性, 禁止指令重排 为了解决 volatile不保证原子性的问题, 引入了原子类, AtomicInt ...

  3. 《python网络数据采集》笔记1

    第一部分-创建爬虫 1.urllib 1)urllib.request request.urlopen(url) request.urlretrieve 可以根据文件的 URL 下载文件 2)urll ...

  4. 在线博客转PDF电子书 | JS爬虫初探

    最近在看一位大佬写的源码解析博客,平时上下班用手机看不太得劲,但是平板又没有网卡,所以就想搞个离线pdf版,方便通勤时间学习阅读. 所以,问题来了: 怎么把在线网页内容转成pdf? 这位大佬的博客是用 ...

  5. 学习JDK源码（一）：String

    用了好久的Java了,从来没有看过jdk的源码,趁着今天有点时间,拿出了jdk的源码看了下,今天先看了关于String的,毕竟开发中String类型使用最广泛.在我们下载安装jdk的时候,部分源码也已 ...

  6. 最佳实践丨使用Rancher轻松管理上万资源不是梦！

    前 言 Rancher 作为一个开源的企业级 Kubernetes 集群管理平台.你可以导入现有集群,如 ACK.TKE.EKS.GKE,或者使用 RKE.RKE2.K3s 自定义部署集群. 作为业界 ...

  7. 源代码管理相关命令（Git常用命令、Nuget常用命令、CMD常用命令）

    Git常用命令 源代码工具 工具名称 相关地址 Git Git for Windows VSC Visual Studio Code VSC插件(Gitlen) GitLens - Git super ...

  8. ES6深度解析3：Generators

    介绍ES6 Generators 什么是Generators(生成器函数)?让我们先来看看一个例子. function* quips(name) { yield "hello " ...

  9. 使用Dice loss实现清晰的边界检测

    ​ 前言: 在深度学习和计算机视觉中,人们正在努力提取特征,为各种视觉任务输出有意义的表示.在一些任务中,我们只关注对象的几何形状,而不管颜色.纹理和照明等.这就是边界检测的作用所在. 关注公众号CV ...

  10. 使用gitlab自带的ci/cd实现.net core应用程序的部署

    这两天在折腾持续集成和交付,公司考虑使用gitlab自带的ci/cd来处理,特此记下来整个流程步骤. 好记性不如一支烂笔头---尼古拉斯-古人言 第一步: 安装gitlab,这个自然不用多说 第二步: ...