日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網(wǎng)站首頁 編程語言 正文

React使用ref方法與場景介紹_React

作者：搞前端的小菜 ? 更新時間： 2022-12-03 編程語言

摘要

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

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

1.ref的掛載

在React中，ref可以掛載到html元素上，同時也可以掛載在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>
    )
  }
}

控制臺的打印為：

可以看到，在React中，ref是可以掛載到HTML元素和React元素上的。

（1）掛載HTML元素，返回真實的DOM

（2）掛載React元素，返回render后的實例對象

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

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

同時在上面的代碼我們也可以看出來，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ù)可能還會廢棄。

（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>
    )
  }
}

記住這里面通過refElement中的current，獲取真實的DOM元素。

3.ref的使用場景

這里我們說一個比較常見的場景，就是點擊按鈕讓輸入框聚焦：

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>
    )
  }
}

通過獲取DOM后，調(diào)用DOM上的focus方法API，來讓input框進行聚焦。

同時ref也可以適用于一些DOM元素的動畫效果，例如移動，變大變小，都需要通過ref來控制DOM，進行操作。

原文鏈接：https://blog.csdn.net/weixin_46726346/article/details/127545244

欄目分類
最近更新