React使用ref方法與場(chǎng)景介紹

更新時(shí)間：2022年10月31日 10:08:37 作者：搞前端的小菜

這篇文章主要介紹了React使用ref方法與場(chǎng)景，React支持給任意組件添加特殊屬性。ref屬性接受一個(gè)回調(diào)函數(shù)，它在組件被加載或卸載時(shí)會(huì)立即執(zhí)行

摘要

不管在Vue中還是React，如果我們想使用一個(gè)元素的DOM，不需要通過(guò)JS中操縱DOM的方法，它們提供了一個(gè)專(zhuān)屬的API就是ref。

而Vue中的ref可能比較簡(jiǎn)單，這一篇主要講一下如何在React中使用ref，以及使用ref的場(chǎng)景。

1.ref的掛載

在React中，ref可以?huà)燧d到html元素上，同時(shí)也可以?huà)燧d在React元素上，看下面的代碼：

import React, { Component } from 'react'
// import { findDOMNode } from 'react-dom'
import Child from './Child'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refs.refElement);
    console.log(this.refs.child);
  }
  render() {
    return (
      <div>
        <input ref={ 'refElement' }></input>
        <Child ref={ 'child' }/>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

控制臺(tái)的打印為：

可以看到，在React中，ref是可以?huà)燧d到HTML元素和React元素上的。

（1）掛載HTML元素，返回真實(shí)的DOM

（2）掛載React元素，返回render后的實(shí)例對(duì)象

同時(shí)React也提供了一個(gè)方法findDOMNode可以將React元素的ref返回變成真實(shí)的DOM元素。

	import { findDOMNode } from 'react-dom'
    console.log(findDOMNode(this.refs.child));

同時(shí)在上面的代碼我們也可以看出來(lái)，ref的掛載是在componentDidMount等生命周期之前執(zhí)行的。

2.使用ref的三種方式

（1）字符串的方式

import React, { Component } from 'react'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refs.refElement);
  }
  render() {
    return (
      <div>
        <input ref={ 'refElement' }></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

這種方式和Vue的ref比較相似，但是官方目前已經(jīng)不推薦使用該方式，后續(xù)可能還會(huì)廢棄。

（2）函數(shù)的方式

import React, { Component } from 'react'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refElement);
  }
  render() {
    return (
      <div>
        <input ref={ ref => this.refElement = ref }></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

（3）react.CreateRef的方式

import React, { Component } from 'react'
export default class Father extends Component {
  refElement = React.createRef();
  componentDidMount(){
    console.log(this.refElement.current);
  }
  render() {
    return (
      <div>
        <input ref={this.refElement}></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

記住這里面通過(guò)refElement中的current，獲取真實(shí)的DOM元素。

3.ref的使用場(chǎng)景

這里我們說(shuō)一個(gè)比較常見(jiàn)的場(chǎng)景，就是點(diǎn)擊按鈕讓輸入框聚焦：

import React, { Component } from 'react'
export default class Father extends Component {
  refElement = React.createRef();
  componentDidMount(){
    console.log(this.refElement.current);
  }
  fn = ()=>{
    this.refElement.current.focus();
  }
  render() {
    return (
      <div>
        <input ref={this.refElement}></input>
        <button onClick={this.fn}>聚焦</button>
      </div>
    )
  }
}

通過(guò)獲取DOM后，調(diào)用DOM上的focus方法API，來(lái)讓input框進(jìn)行聚焦。

同時(shí)ref也可以適用于一些DOM元素的動(dòng)畫(huà)效果，例如移動(dòng)，變大變小，都需要通過(guò)ref來(lái)控制DOM，進(jìn)行操作。

到此這篇關(guān)于React使用ref方法與場(chǎng)景介紹的文章就介紹到這了,更多相關(guān)React ref內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: