zoukankan      html  css  js  c++  java
  • 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我们就介绍到这,希望本文对大家有所帮助。

  • 相关阅读:
    数据结构之树和二叉树的一些基本概念
    面向对象的三大特点
    WOJ 1020
    C++ STL copy函数效率分析
    局部特化和类模板成员特化
    局部特化 & 特化
    back_inserter 与 iterator
    new期间的异常
    数组分配
    placement new和delete
  • 原文地址:https://www.cnblogs.com/daiwenru/p/8492063.html
Copyright © 2011-2022 走看看