React组件refs该怎么使用

React组件refs该怎么使用
这次给大家带来React组件refs该怎么使用，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的讲解，可见下面描述的场景应该是比较经典的）：通过某个事件使<input>元素的值被设为空字符串，然后使该<input>元素获得焦点。

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 (    <p>     <input>          <input>    </p>   );  } });