ref 获取 DOM 节点

目录

• useRef
• forwardRef

1. useRef

useRef获取当前 DOM 节点, 例如用来foucs当前文本输入, 或者control媒体文件(audio)等

例如下面的 demo 获取当前媒体的 DOM 节点用以此来进行快进后退的操作.

其他的例如用户可以标注一个时间开始点或者范围, 然后下次从该位置开始播放等等.

import React, { useRef } from "react"
import track from "../src/demo.mp3"

const App = () => {
  const audioRef = useRef(null)

  return (
    <>
      <audio src={track} ref={audioRef} controls />
      <button onClick={() => (audioRef.current.currentTime += 5)}>
        快进5秒
      </button>
      <button onClick={() => (audioRef.current.currentTime -= 5)}>
        后退5秒
      </button>
    </>
  )
}

export default App

input ref

import React, {useState, useEffect, useRef} from 'react'

export const App = () => {
  const [name, setName] = useState('')
  const inputRef = useRef()

  const focusInput = () => {
    inputRef.current.focus()
  }

  return (
    <div>
      <input ref={inputRef} value={name} onChange={e => setName(e.target.value)}>
      <p>My name is {name}</p>
      <button onClick={focusInput}></button>
    </div>
  )
}

2. forwardRef 传递 ref

如果useRef是在父级组件声明, 且一些函数处理也在父级. 子级组件的 ref 可以通过forwardRef来获取.

AudioPlayer.js

const AudioPlayer = (props, ref) => {
  return <audio src={props.track} ref={ref} controls />
}

export default forwardRef(AudioPlayer)

App.js

const App = () => {
  const audioRef = useRef(null)

  return (
    <>
      <AudioPlayer track={track} ref={audioRef} />
      <button onClick={() => (audioRef.current.currentTime += 5)}>
        快进5秒
      </button>
      <button onClick={() => (audioRef.current.currentTime -= 5)}>
        后退5秒
      </button>
    </>
  )
}