react18使用ref操作DOM总结(包括父组件获取子组件)

类组件获取方式

获取组件本身的DOM

import React, {createRef} from "react"
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      name: ''
    }
    // 官方文档标注这样使用过时了
    // this.domRef = React.createRef()
    // 要这样使用
      this.domRef = createRef()
  }
  handleClick() {
    this.domRef.current.textContent = 'Hello Vue!!'
  }
  render() {
    return(
      <div>
        <div ref={this.domRef}>Hello React !!</div>
        <button onClick={() => this.handleClick()}>获取dom内容</button>
      </div>
    )
  }
}

调用子组件DOM和方法

// 父组件
import React, { Component, createRef } from 'react'
import ChildCom from './ChildCom'
// 父组件
class App extends React.Component {
    constructor(props) {
    	super()
    	this.comRef = createRef()
    }
    handleClick = () => {
        // 调用子组件方法
    	this.comRef.current.test()
        // 改变子组件DOM内容
        this.comRef.current.domRef.current.textContent = '已经改了子组件内容'
    }
    render() {
        return(
            <div>
            	<ChildCom ref={this.comRef}  />
          		<button onClick={this.handleClick}>调用子组件的方法</button>
            </div>
        )
    }
}

// 子组件
import React, { Component, createRef } from 'react'

export default class ChildCom extends Component {
  const domRef = createRef()
  test() {
    console.log('子组件特有的方法');
  }
  render() {
    return (
      <div>
        <div ref={domRef}>这是子组件</div>
      </div>
    )
  }
}

函数组件获取方式

获取组件本身的DOM

import { useRef } from 'react'
function App() {
    const domRef = useRef()
    const handleClick = () => {
      domRef.current.textContent = 'Hello Vue!!'
      
    }
    return(
    	<div>
          <div ref={domRef}>Hello React !!</div>
          <button onClick={handleClick}>获取dom内容</button>
        </div>
    )
}

获取子组件实例的dom

import { useRef } from 'react'
// 父组件
export default function App() {
    const comRef = useRef()
    useEffect(() => {
    if(comRef.current) {
      // 获取子组件某个DOM
      comRef.current.focus()
    }
  }, [comRef])
    return(
    	<div>
          <ChildCom2 ref={comRef} />
        </div>
    )
}
// 子组件
import { forwardRef, useState } from 'react'
function ChildCom2(props, ref) {
  const [value, setValue] = useState('')
  return (
    <div>
      <div>输入框聚焦</div>
      <div>
        <input type="text" value={value} onChange={(e) => setValue(e.target.value)} ref={ref} />
      </div>
    </div>
  )
}
export default forwardRef(ChildCom2)

获取子组件实例方法

// 父组件,关键代码
import {useRef} from 'react'
const comRef = useRef()
function handleClick() {
    // 调用子组件方法
    comRef.current.testHadle()
}
return(
	<div>
    	<div className='marginButton'>
            <FunChild ref={comRef} />
        </div>
        <button onClick={handleClick}>获取子组件DOM和方法</button>
    </div>
)


// 子组件,关键代码
import {useImperativeHandle, forwardRef} from 'react'
function FunChild(props, ref) {
    const comRef = useRef()
    function handleTest() {
        console.log('这是子组件方法')
    }
    useImperativeHandle(ref, () => ({
        childTest: handleTest
    }))
    return(
        <div>
            这是子组件
        </div>
    )
}
export default forwardRef(FunChild)

获取子组件实例和方法

// 父组件关键代码
import { useRef } from 'react'

export default function Parent() {
    const comRef = useRef()
    function handleClick () {
        // 调用子组件方法
        comRef.current.testHadle()
        // 通过调用子组件的方法获取子组件的DOM
        comRef.current.click()
    }
    return(
     <div>
        <h4>获取子组件的方式</h4>
        <div className='marginButton'>
          <FunChild ref={comRef} />
        </div>
        <button onClick={handleClick}>获取子组件DOM和方法</button>
      </div>
    )
}

// FunChild.jsx
import { forwardRef, useImperativeHandle, useRef } from 'react'

function FunChild(props, ref) {
  const childRef = useRef()
  // 暴露出去的方法
  function getSomeText() {
    console.log('调用子组件的方法');
  }
  useImperativeHandle(ref, () => ({
    testHadle: getSomeText,
    click: function () {
      childRef.current.focus()
    }
  }))
  return (
    <div>
      <div>输入框聚焦</div>
      <div>
        <input type="text" ref={childRef} />
      </div>
    </div>
  )
}

export default forwardRef(FunChild)