首頁  >  文章  >  web前端  >  在React元件中refs的使用方法

在React元件中refs的使用方法

亚连
亚连原創
2018-06-06 14:43:571609瀏覽

這篇文章主要介紹了React元件refs的使用詳解,現在分享給大家,也給大家做個參考。

ref顧名思義我們知道,其實它就可以被看座是一個元件的參考,也可以說是一個標識。作為組件的屬性,其屬性值可以是字串也可以是函數。

其實,ref的使用不是必須的。即使在其適用的場景中也不是非用不可的,因為使用ref實現的功能同樣可以轉化成其他的方法來實現。但是,既然ref有其適用的場景,也就是說ref自有其優勢。關於這一點和ref的適用場景,官方文件中是這樣說的:

在從render 方法中返回UI 結構之後,你可能想衝出React 虛擬DOM 的限制,在render 返回的元件實例上呼叫某些方法。通常來說,這樣做對於應用程式中的資料流是不必要的,因為活躍的資料( Reactive data )流總是確保最新的 props 被傳遞到每一個從 render() 輸出的子級中去。然而,仍然有幾個場景使用這種方式是必須的,或者說是有益的:尋找渲染出的元件的DOM標記(可以認為是DOM的識別ID),在一個大型的非React應用中使用React元件或者是將你現有的程式碼轉換成React。

下面我們來看這樣的一個場景(下面的例子經常被用於ref的講解,可見下面描述的場景應該是比較經典的):透過某個事件使73a3ca28445b1c625f2086a50cb8c7df元素的值設為空字串,然後使該73a3ca28445b1c625f2086a50cb8c7df元素獲得焦點。

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

在上面範例中,我們已經實現了點擊按鈕通知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: &#39;&#39;};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: &#39;&#39;}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <p>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </p>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById(&#39;content&#39;)
);

在這個範例中, render 函數傳回一個73a3ca28445b1c625f2086a50cb8c7df 實例的描述。但是真正的實例透過 this.refs. myTextInput取得。只要 render 回傳的某個子元件帶有 ref="myTextInput" ,this.refs. myTextInput就會取得正確的實例。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

透過vue-cli webpack專案如何實作修改專案名稱

在vue元件中如何實作全域註冊和局部註冊

在vue中如何實作自訂全域方法

#

以上是在React元件中refs的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn