input 清空值。（转载）

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 (
        <div>
          <input
            value={this.state.userInput}
            onChange={this.handleChange}
          />
                    <input type="button"
                      value="Reset And Focus"
                      onClick={this.clearAndFocusInput}
               />
        </div>
      );
    }
  });

在上面例子中，咱们已经实现了点击按钮通知input元素将值设为空字符串，可是尚未实现使input元素得到焦点。这实现起来有些困难，由于在render()中返回的并非实际的子组件的组合，仅仅是一个特定时间特定实例的描述。这句话感受挺绕的，其实render返回的是虚拟的DOM，并非真实的DOM。所以咱们不须要仅仅着眼于那些从render()中返回的那些组件。

那说到这，对于咱们如何实现得到焦点并无太大的帮助。要想实现得到焦点这个功能咱们须要借助ref来实现。上面咱们提到过ref的值有两种类型，一种是字符串、一种是回调函数。

ref字符串上属性

React支持一个特殊的属性，你能够将这个属性加在任何经过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，能够方便的定位的这个组件实例。这就是ref的做用。

ref的形式以下

<input ref="myInput" />

要想访问这个实例，能够经过this.refs来访问：

this.refs.myInput

先前版本中，咱们能够经过React.findDOMNode(this.refs.myInput)来访问组件的DOM。可是如今，已经放弃了findDOMNode函数了，能够直接使用this.refs.myInput来进行访问。

ref回调函数

ref属性也能够是一个回调函数而不是一个名字。   这个函数将要在组件被挂载以后当即执行。这个参照的组件将会做为该函数的参数，这个函数能够当即使用这个组件参数，固然也能够将其保存供之后使用。

其形式也比较简单：

render: function() {
   return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
   this._input.focus();
},

或者是

render: function() {
    return (
      <TextInput
        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 <input /> now!
        if (this.refs.myTextInput !== null) {
            this.refs.myTextInput.focus();
        }
    },
    render: function() {
        return (
            <div>
                <input
                    value={this.state.userInput}
                    onChange={this.handleChange}
                    ref=”myTextInput”      
                                         />
                <input
                    type="button"
                    value="Reset And Focus"
                    onClick={this.clearAndFocusInput}
                    />
            </div>
        );
    }
});
ReactDOM.render(
    <App />,
    document.getElementById('content')
);

在这个例子中， render 函数返回一个 <input /> 实例的描述。可是真正的实例经过 this.refs. myTextInput获取。只要 render 返回的某个子组件带有 ref="myTextInput" ，this.refs. myTextInput就会获取到正确的实例。

上面就是ref的全部内容，更多关于ref的介绍能够参考Ref to Components。

对于ref咱们就介绍到这，但愿本文对你们有所帮助。