欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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,不需要通過JS中操縱DOM的方法,它們提供了一個(gè)專屬的API就是ref。

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

1.ref的掛載

在React中,ref可以掛載到html元素上,同時(shí)也可以掛載在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是可以掛載到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í)在上面的代碼我們也可以看出來,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>
    )
  }
}

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

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

這里我們說一個(gè)比較常見的場(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>
    )
  }
}

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

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

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

相關(guān)文章

  • React Native第三方平臺(tái)分享的實(shí)例(Android,IOS雙平臺(tái))

    React Native第三方平臺(tái)分享的實(shí)例(Android,IOS雙平臺(tái))

    本篇文章主要介紹了React Native第三方平臺(tái)分享的實(shí)例(Android,IOS雙平臺(tái)),具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-08-08
  • 淺談React組件在什么情況下會(huì)重新渲染

    淺談React組件在什么情況下會(huì)重新渲染

    當(dāng)我們使用React編寫組件時(shí),組件的重新渲染是一個(gè)重要的概念,本文主要介紹了React組件在什么情況下會(huì)重新渲染,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-12-12
  • React事件處理和表單的綁定詳解

    React事件處理和表單的綁定詳解

    這篇文章主要介紹了React事件處理和表單的綁定,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • React中setState/useState的使用方法詳細(xì)介紹

    React中setState/useState的使用方法詳細(xì)介紹

    這篇文章主要介紹了React中setState/useState的使用方法,useState 和 setState 在React開發(fā)過程中 使用很頻繁,但很多人都停留在簡(jiǎn)單的使用階段,并沒有正在了解它們的執(zhí)行機(jī)制
    2023-04-04
  • 深入理解React 三大核心屬性

    深入理解React 三大核心屬性

    本文主要介紹了React 三大核心屬性,主要包括State屬性,Props屬性,Refs屬性,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • react?redux的原理以及基礎(chǔ)使用講解

    react?redux的原理以及基礎(chǔ)使用講解

    這篇文章主要介紹了react?redux的原理以及基礎(chǔ)使用講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • react+tsx中使用better-scroll詳解

    react+tsx中使用better-scroll詳解

    這篇文章主要介紹了react+tsx中使用better-scroll,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-09-09
  • React新文檔切記不要濫用Ref

    React新文檔切記不要濫用Ref

    這篇文章主要為大家介紹了React新文檔濫用Ref出現(xiàn)的問題詳解,以及如何正確的使用Ref,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2022-07-07
  • react hooks入門詳細(xì)教程

    react hooks入門詳細(xì)教程

    這篇文章主要介紹了react hooks入門詳細(xì)教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-04-04
  • 可定制react18 input otp 一次性密碼輸入組件

    可定制react18 input otp 一次性密碼輸入組件

    這篇文章主要為大家介紹了可定制react18 input otp 一次性密碼輸入組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10

最新評(píng)論