React的组件refs怎么用

这篇文章主要介绍了React的组件refs怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇React的组件refs怎么用文章都会有所收获，下面我们一起来看看吧。ref顾名思义我们知道，其实它就可以被看座是一个组件的参考，也可以说是一个标识。作为组件的属性，其属性值可以是一个字符串也可以是一个函数。其实，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.tar 香港云主机get.value});
},
clearAndFocusInput: function() {
this.setState({userInput: ”}); // 设置值为空字符串
//这里想要实现获得焦点
},
render: function() {
return (
在上面例子中，我们已经实现了点击按钮通知input元素将值设为空字符串，但是还没有实现使input元素获得焦点。这实现起来有些困难，因为在render()中返回的并不是实际的子组件的组合，仅仅是一个特定时间特定实例的描述。这句话感觉挺绕的，其实render返回的是虚拟的DOM，并不是真实的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 this._input = c} } />;
},
componentDidMount: function() {
this._input.focus();
},或者是render: function() {
return (
ref={function(input) {
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 (
在这个例子中， render 函数返回一个 实例的描述。但是真正的实例通过 this.refs. myTextInput获取。只要 render 返回的某个子组件带有 ref=”myTextInput” ，this.refs. myTextInput就会获取到正确的实例。关于“React的组件refs怎么用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“React的组件refs怎么用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注开发云行业资讯频道。

相关推荐: Windows10系统中的appdata文件夹如何删除

这篇文章主要为大家展示了“Windows10系统中的appdata文件夹如何删除”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Windows10系统中的appdata文件夹如何删除”这篇文章吧。电脑用久了，都会出现…