react组件refs详解
ref顾名思义我们知道，其实它就可以被看座是一个组件的参考，也可以说是一个标识。作为组件的属性，其属性值可以是一个字符串也可以是一个函数。
其实，的使用不是必须的。即使是在其适用的场景中也不是非用不可的，因为使用ref实现的功能同样可以转化成其他的方法来实现。但是，既然ref有其适用的场景，那也就是说ref自有其优势。关于这一点和ref的适用场景，官方文档中是这样说的：
在从 render 方法中返回 ui 结构之后，你可能想冲出 react 虚拟 dom 的限制，在 render 返回的组件实例上调用某些方法。通常来说，这样做对于应用中的数据流动是不必要的，因为活跃的数据（ reactive data ）流总是确保最新的 props 被传递到每一个从 render() 输出的子级中去。然而，仍然有几个场景使用这种方式是必须的，或者说是有益的：查找渲染出的组件的dom标记（可以认为是dom的标识id），在一个大型的非react应用中使用react组件或者是将你现有的代码转化成react。
下面我们来看这样的一个场景（下面的例子经常被用于ref的讲解，可见下面描述的场景应该是比较经典的）：通过某个事件使元素的值被设为空字符串，然后使该元素获得焦点。
var app = react.createclass({
getinitialstate: function() {
return {userinput: ''};
},
handlechange: function(e) {
this.setstate({userinput: e.target.value});
},
clearandfocusinput: function() {
this.setstate({userinput: ''}); // 设置值为空字符串
//这里想要实现获得焦点
},
render: function() {
return (
onchange={this.handlechange}
/>
value="reset and focus"
onclick={this.clearandfocusinput}
/>
);
}
});
在上面例子中，我们已经实现了点击按钮通知input元素将值设为空字符串，但是还没有实现使input元素获得焦点。这实现起来有些困难，因为在render()中返回的并不是实际的子组件的组合，仅仅是一个特定时间特定实例的描述。这句话感觉挺绕的，其实render返回的是，并不是真实的dom。因此我们不需要仅仅着眼于那些从render()中返回的那些组件。
那说到这，对于我们如何实现获得焦点并没有太大的帮助。要想实现获得焦点这个功能我们需要借助ref来实现。上面我们提到过ref的值有两种类型，一种是字符串、一种是回调函数。
ref字符串上属性
react支持一个特殊的属性，你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，可以方便的定位的这个组件实例。这就是ref的作用。
ref的形式如下
要想访问这个实例，可以通过this.refs来访问：
this.refs.myinput
先前版本中，我们可以通过react.finddomnode(this.refs.myinput)来访问组件的dom。但是现在，已经放弃了finddomnode函数了，可以直接使用this.refs.myinput来进行访问。
ref回调函数
ref属性也可以是一个回调函数而不是一个名字。 这个函数将要在组件被挂载之后立即执行。这个参照的组件将会作为该函数的参数，这个函数可以立即使用这个组件参数，当然也可以将其保存供以后使用。
其形式也比较简单：
render: function() {
return
},
componentdidmount: function() {
this._input.focus();
},
或者是
render: function() {
return (
if (input != null) {
input.focus();
}
}} />
);
},
这里需要注意，当这个参照组件被卸载并且这个ref改变的时候，先前的ref的参数值将为null。这将有效的防止了内存的泄露。所以在上面代码中会有if判断：
if(input != null){
input.focus();
}
上面介绍了ref的使用场景和方法，下面我们就将上面的例子来补充完整，从而实现获得焦点的功能
var app = react.createclass({
getinitialstate: function() {
return {userinput: ''};
},
handlechange: function(e) {
this.setstate({userinput: e.target.value});
},
clearandfocusinput: function() {
this.setstate({userinput: ''}); // clear the input
// we wish to focus the now!
if (this.refs.mytextinput !== null) {
this.refs.mytextinput.focus();
}
},
render: function() {
return (
onchange={this.handlechange}
ref=”mytextinput”
/>
value="reset and focus"
onclick={this.clearandfocusinput}
/>
);
}
});
reactdom.render(
document.getelementbyid('content')
);
在这个例子中， render 函数返回一个 实例的描述。但是真正的实例通过 this.refs. mytextinput获取。只要 render 返回的某个子组件带有 ref="mytextinput" ，this.refs. mytextinput就会获取到正确的实例。
上面就是ref的所有内容，更多关于ref的介绍可以参考。
对于ref我们就介绍到这，希望本文对大家有所帮助。
转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处
本文地址：
相关文章
href # 与 javascript 无效
发布时间：2024/03/20 浏览次数：152 分类：javascript
-
本文解释了何时将 href # 和 javascript:void(0) 用于 javascript 链接。这可以帮助你根据你的用例决定使用哪一个。此外，我们将解释可用于 javascript 链接的更好方法。
发布时间：2024/03/20 浏览次数：236 分类：javascript
-
本文将介绍如何在 javascript 中获取 href/location。javascript 组件提供了两种选择，第一种使用 location 属性，第二种使用 open 方法。
java 中的 reflection 是什么
发布时间：2023/11/13 浏览次数：90 分类：java
-
本文介绍了 reflection 以及如何在 java 中使用它。本文介绍 reflection 以及如何在 java 中使用它。java 有一个 reflection api 特性，它允许我们检查和修改类、接口等。
java 中错误 attempt to invoke virtual method on a null object reference
发布时间：2023/07/16 浏览次数：948 分类：java
-
本篇文章介绍如何解决 java 中的 attempt to invoke virtual method on a null object reference 错误。java 中 attempt to invoke virtual method on a null object reference 错误
发布时间：2023/07/14 浏览次数：280 分类：java
-
本篇文章介绍了 error: non-static variable count cannot be referenced from a static context 错误。要理解错误 error: non-static variable count cannot be referenced from a static context，首先，我们需要了解静态和非静态方法的
发布时间：2023/07/13 浏览次数：156 分类：java
-
本篇文章介绍如何解决java的 java char cannot be dereferenced 错误。java char cannot be dereferenced 当我们尝试使用 equals() 方法检查一个字符是否与另一个字符相等时，会出现错误 java char can not be dereferenc
解决 java 错误 int cannot be dereferenced
发布时间：2023/07/11 浏览次数：429 分类：java
-
在本文中，我们将讨论 java 中 int cannot be dereferenced 异常的原因以及如何修复它。 首先，了解一下 java 中的解引用是什么。java 中的取消引用 原始变量和对象变量是 java 中可以使用的两种类型的
理解 java 中的 java.lang.reflect.invocationtargetexception 错误
发布时间：2023/07/10 浏览次数：467 分类：java
-
在本文中，我们将了解 java 中的 java.lang.reflect.initationtargetexception。java 中的 java.lang.reflect.initationtargetexception 错误 当开发人员使用 java reflection api 时，java.lang.reflect.initationtargetexception 是一个非
