【REACT-forwardRef-透传ref到子组件】

最新推荐文章于 2024-03-22 18:41:08 发布

历目

最新推荐文章于 2024-03-22 18:41:08 发布

阅读量415

点赞数

分类专栏： REACT 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/limuzhixing/article/details/129070888

版权

REACT 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1. 普通写法

import React, { Component,createRef } from 'react'

export default class App extends Component {
  myinput = null;

  render() {
    return (
      <div>
        <button onClick={()=>{
          this.myinput.current.focus();
        }}>获取焦点</button>
        <Child cb={el=>{
          this.myinput = el;
        }}/>
      </div>
    )
  }
}

class Child extends Component {
  myinput = createRef();
  componentDidMount(){
    this.props.cb(this.myinput);
  }

  render(){
    return (
      <div style={{background:'yelllow'}}>
        <input defaultValue="1" ref={this.myinput}/>
      </div>
    )
  }
}

2. forwardRef

forwardRef-透传ref到子组件

import React, { Component,createRef, forwardRef } from 'react'

export default class App extends Component {
  myinput = createRef();

  render() {
    return (
      <div>
        <button onClick={()=>{
          this.myinput.current.focus();
        }}>获取焦点</button>
        <Child ref={this.myinput}/>
      </div>
    )
  }
}


const Child = forwardRef((props,ref)=>{
  return (
    <div style={{background:'pink'}}>
      {/* ref必须指向dom元素,不能是组件 */}
      <input defaultValue="1" ref={ref}/>
    </div>
  )
})