React16.8中父组件获取子组件数据的3中方式

最新推荐文章于 2025-06-13 17:18:58 发布

weixin_34192993

最新推荐文章于 2025-06-13 17:18:58 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ce65b6d6fb9a07ee958487b

博客围绕React组件展开，介绍了类组件和函数组件获取子组件数据的方法。类组件直接定义父组件，函数组件需两步操作。同时指出上述方式会暴露全量数据，还给出了只暴露部分数据的优化方案，涉及子组件和父组件代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、类组件的情况下

1、定义父组件(直接使用ref)

export default class UserRef1 extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }
  focus = () => {
    console.log(this.child.current.inputRef.current.value);
    this.child.current.inputRef.current.focus();
  }
  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.focus}>获取焦点</button>
      </div>
    )
  }
}
复制代码

2、子组件中

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '哈哈'
    }
    this.inputRef = React.createRef();
  }
  render() {
    return (
      <input type="text" value={this.state.name} onChange={(e) => this.setState(e.target.value)} ref={this.inputRef} />
    )
  }
}
复制代码

二、函数组件

在函数组件中要获取子组件的数据,需要两步骤1.将ref传递到子组件中,2.需要使用forwardRef对子组件进行包装

1、父组件

export default () => {
  const parentRef = useRef();
  function focusHander() {
    console.log(parentRef);
    parentRef.current.focus();
    parentRef.current.value = '哈哈';
  }
  return (
    <>
      <ForwardChild ref={parentRef} />
      <button onClick={focusHander}>获取焦点</button>
    </>
  )
}
复制代码

2、子组件中

function Child(props, parentRef) {
  console.log(props);
  return (
    <>
      <input type="text" ref={parentRef} />
    </>
  )
}
/**
 * 使用forwardRef将ref直接传递进去
 */
let ForwardChild = forwardRef(Child);
复制代码

三、优化

上面的方式都会将组件中全部的数据暴露出去,有时候我们想只想暴露出一部分数据

1、子组件的代码

import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react'

function Child(props, parentRef) {
  const inputRef = useRef();
  useImperativeHandle(parentRef, () => {
    // return返回的值就可以被父组件获取到
    return {
      focus() {
        inputRef.current.focus();
      }
    }
  })
  return (
    <>
      <p>{props.name}</p>
      <input type="text" ref={inputRef} />
    </>
  )
}

let ForwardChidl = forwardRef(Child);
复制代码

2、父组件的代码

export default () => {
  const parentRef = useRef();

  const focusHandler = () => {
    parentRef.current.focus();
  }
  return (
    <>
      <ForwardChidl ref={parentRef} name={'你好'} />
      <button onClick={focusHandler}>获取焦点</button>
    </>
  )
}
复制代码