這篇文章主要介紹了React的組件refs怎么用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇React的組件refs怎么用文章都會(huì)有所收獲，下面我們一起來看看吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、鶴峰網(wǎng)站維護(hù)、網(wǎng)站推廣。

ref顧名思義我們知道，其實(shí)它就可以被看座是一個(gè)組件的參考，也可以說是一個(gè)標(biāo)識(shí)。作為組件的屬性，其屬性值可以是一個(gè)字符串也可以是一個(gè)函數(shù)。

其實(shí)，ref的使用不是必須的。即使是在其適用的場(chǎng)景中也不是非用不可的，因?yàn)槭褂胷ef實(shí)現(xiàn)的功能同樣可以轉(zhuǎn)化成其他的方法來實(shí)現(xiàn)。但是，既然ref有其適用的場(chǎng)景，那也就是說ref自有其優(yōu)勢(shì)。關(guān)于這一點(diǎn)和ref的適用場(chǎng)景，官方文檔中是這樣說的：

在從 render 方法中返回 UI 結(jié)構(gòu)之后，你可能想沖出 React 虛擬 DOM 的限制，在 render 返回的組件實(shí)例上調(diào)用某些方法。通常來說，這樣做對(duì)于應(yīng)用中的數(shù)據(jù)流動(dòng)是不必要的，因?yàn)榛钴S的數(shù)據(jù)（ Reactive data ）流總是確保最新的 props 被傳遞到每一個(gè)從 render() 輸出的子級(jí)中去。然而，仍然有幾個(gè)場(chǎng)景使用這種方式是必須的，或者說是有益的：查找渲染出的組件的DOM標(biāo)記（可以認(rèn)為是DOM的標(biāo)識(shí)ID），在一個(gè)大型的非React應(yīng)用中使用React組件或者是將你現(xiàn)有的代碼轉(zhuǎn)化成React。

下面我們來看這樣的一個(gè)場(chǎng)景（下面的例子經(jīng)常被用于ref的講解，可見下面描述的場(chǎng)景應(yīng)該是比較經(jīng)典的）：通過某個(gè)事件使<input />元素的值被設(shè)為空字符串，然后使該<input />元素獲得焦點(diǎn)。

var App = React.createClass({
    getInitialState: function() {
      return {userInput: ''};
    },
    handleChange: function(e) {
      this.setState({userInput: e.target.value});
    },
    clearAndFocusInput: function() {
      this.setState({userInput: ''}); // 設(shè)置值為空字符串
                //這里想要實(shí)現(xiàn)獲得焦點(diǎn)     
    },
    render: function() {
      return (
        <div>
          <input
            value={this.state.userInput}
            onChange={this.handleChange}
          />
                    <input type="button"
                      value="Reset And Focus"
                      onClick={this.clearAndFocusInput}
               />
        </div>
      );
    }
  });

在上面例子中，我們已經(jīng)實(shí)現(xiàn)了點(diǎn)擊按鈕通知input元素將值設(shè)為空字符串，但是還沒有實(shí)現(xiàn)使input元素獲得焦點(diǎn)。這實(shí)現(xiàn)起來有些困難，因?yàn)樵趓ender()中返回的并不是實(shí)際的子組件的組合，僅僅是一個(gè)特定時(shí)間特定實(shí)例的描述。這句話感覺挺繞的，其實(shí)render返回的是虛擬的DOM，并不是真實(shí)的DOM。因此我們不需要僅僅著眼于那些從render()中返回的那些組件。

那說到這，對(duì)于我們?nèi)绾螌?shí)現(xiàn)獲得焦點(diǎn)并沒有太大的幫助。要想實(shí)現(xiàn)獲得焦點(diǎn)這個(gè)功能我們需要借助ref來實(shí)現(xiàn)。上面我們提到過ref的值有兩種類型，一種是字符串、一種是回調(diào)函數(shù)。

ref字符串上屬性

React支持一個(gè)特殊的屬性，你可以將這個(gè)屬性加在任何通過render()返回的組件中。這也就是說對(duì)render()返回的組件進(jìn)行一個(gè)標(biāo)記，可以方便的定位的這個(gè)組件實(shí)例。這就是ref的作用。

ref的形式如下

<input ref="myInput" />

要想訪問這個(gè)實(shí)例，可以通過this.refs來訪問：

this.refs.myInput

先前版本中，我們可以通過React.findDOMNode(this.refs.myInput)來訪問組件的DOM。但是現(xiàn)在，已經(jīng)放棄了findDOMNode函數(shù)了，可以直接使用this.refs.myInput來進(jìn)行訪問。

ref回調(diào)函數(shù)

ref屬性也可以是一個(gè)回調(diào)函數(shù)而不是一個(gè)名字。   這個(gè)函數(shù)將要在組件被掛載之后立即執(zhí)行。這個(gè)參照的組件將會(huì)作為該函數(shù)的參數(shù)，這個(gè)函數(shù)可以立即使用這個(gè)組件參數(shù)，當(dāng)然也可以將其保存供以后使用。

其形式也比較簡(jiǎn)單：

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

這里需要注意，當(dāng)這個(gè)參照組件被卸載并且這個(gè)ref改變的時(shí)候，先前的ref的參數(shù)值將為null。這將有效的防止了內(nèi)存的泄露。所以在上面代碼中會(huì)有if判斷：

if(input != null){
         input.focus();
}

上面介紹了ref的使用場(chǎng)景和方法，下面我們就將上面的例子來補(bǔ)充完整，從而實(shí)現(xiàn)獲得焦點(diǎn)的功能

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=&rdquo;myTextInput&rdquo;      
                                         />
                <input
                    type="button"
                    value="Reset And Focus"
                    onClick={this.clearAndFocusInput}
                    />
            </div>
        );
    }
});
ReactDOM.render(
    <App />,
    document.getElementById('content')
);

在這個(gè)例子中， render 函數(shù)返回一個(gè) <input /> 實(shí)例的描述。但是真正的實(shí)例通過 this.refs. myTextInput獲取。只要 render 返回的某個(gè)子組件帶有 ref="myTextInput" ，this.refs. myTextInput就會(huì)獲取到正確的實(shí)例。

關(guān)于“React的組件refs怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“React的組件refs怎么用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：React的組件refs怎么用
文章路徑：http://jinyejixie.com/article38/ppepsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、Google、服務(wù)器托管、企業(yè)網(wǎng)站制作、ChatGPT、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)