React使用ref方法與場(chǎng)景介紹
摘要
不管在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)),具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08React中setState/useState的使用方法詳細(xì)介紹
這篇文章主要介紹了React中setState/useState的使用方法,useState 和 setState 在React開發(fā)過程中 使用很頻繁,但很多人都停留在簡(jiǎn)單的使用階段,并沒有正在了解它們的執(zhí)行機(jī)制2023-04-04可定制react18 input otp 一次性密碼輸入組件
這篇文章主要為大家介紹了可定制react18 input otp 一次性密碼輸入組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10