forwardRef的使用

原创已于 2022-03-10 17:25:06 修改 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #node.js #javascript

于 2022-03-09 23:28:38 首次发布

React 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了在React中如何通过回调函数和`React.forwardRef`进行父子组件间的通信，以及`forwardRef`在函数式组件中的使用方法。示例代码详细展示了在父组件中获取子组件输入框的引用并操作其焦点和值的过程。

在这里插入图片描述

一普通用法：

import React, { Component } from 'react'

export default class App extends Component {
  mytext=null
  render() {
    return (
      <div>
        <button type="button" onClick={()=>{
          console.log(this.mytext);
          this.mytext.current.focus()
          this.mytext.current.value="2222"
        }}>获取焦点</button>
        <Child callback={(el)=>{
          console.log(el);、
          //el是临时变量，用全局的去接这个值
          this.mytext=el
          //console.log(el.current);
        }}/>
      </div>
    )
  }
}
class Child extends Component {
  mytext = React.createRef();
  //组件渲染完了执行
  componentDidMount() {
    this.props.callback(this.mytext);
  }
  render() {
    return (
      <div style={{background:"yellow"}}>
        <input defaultValue="1111" ref={this.mytext}></input>
      </div>
    );
  }
}

二使用forwardRef

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

export default class App_forwardRef extends Component {
  mytext=React.createRef()
  render() {
    return (
      <div>
      <button type="button" onClick={()=>{
        console.log(this.mytext);
        this.mytext.current.value="2222"
      }}>获取焦点</button>
      <Child ref={this.mytext}/>
      </div>
    )
  }
}
//这里Child是函数式组件
const Child=forwardRef((props,ref)=>{
    return (
      <div>
        <input defaultValue="11111" ref={ref}></input>
      </div>
    );
})