React中如何在父组件内获取子组件内部的state状态值

方案1：状态提升（常规场景优先推荐） #

这是最符合React单向数据流设计的实现方式，将原本存放在Component1内部的状态迁移到父组件MainPage维护，再通过props传递给Component1使用：

• MainPage代码：

const MainPage = () => {
    // 将状态提升到父组件维护
    const [val1, setVal1] = React.useState("");
    const [val2, setVal2] = React.useState("");

    // 父组件可直接访问val1、val2做任意逻辑处理
    console.log("实时获取val1：", val1, "实时获取val2：", val2)

    return (
         <>
              <Component1 
                val1={val1} 
                setVal1={setVal1} 
                val2={val2} 
                setVal2={setVal2} 
              />
              <Component2 />
         </>
    )
}

• Component1代码（接收父组件传入的props使用）：

const Component1 = (props) => {
    return (
         <>
              {/* 注意原代码直接把setVal1传给onChange是错误的，需要从事件对象中取输入值 */}
              <input 
                type="text" 
                value={props.val1} 
                onChange={(e) => props.setVal1(e.target.value)} 
              />
              <input 
                type="text" 
                value={props.val2} 
                onChange={(e) => props.setVal2(e.target.value)} 
              />
         </>
    )
}

方案2：useImperativeHandle + forwardRef（适合高封装度组件场景） #

如果不想将状态提升到父组件，可以通过ref透传的方式，让子组件主动暴露内部状态给父组件调用：

• Component1代码（用forwardRef包裹并暴露内部属性）：

import { forwardRef, useImperativeHandle } from 'react'

const Component1 = forwardRef((props, ref) => {
    const [val1, setVal1] = React.useState("");
    const [val2, setVal2] = React.useState("");

    // 定义要暴露给父组件的方法/属性
    useImperativeHandle(ref, () => ({
        getAllValues: () => ({ val1, val2 })
    }))

    return (
         <>
              <input 
                type="text" 
                value={val1} 
                onChange={(e) => setVal1(e.target.value)} 
              />
              <input 
                type="text" 
                value={val2} 
                onChange={(e) => setVal2(e.target.value)} 
              />
         </>
    )
})

• MainPage代码（通过ref获取子组件暴露的方法）：

const MainPage = () => {
    const component1Ref = React.useRef(null)

    // 在需要取值的场景触发，比如提交表单时
    const handleSubmit = () => {
        const { val1, val2 } = component1Ref.current.getAllValues()
        console.log("获取到的输入值：", val1, val2)
    }

    return (
         <>
              <Component1 ref={component1Ref} />
              <button onClick={handleSubmit}>获取输入值</button>
              <Component2 />
         </>
    )
}

注意：ref方案不要滥用，优先选择状态提升，避免数据流混乱。

内容的提问来源于stack exchange，提问作者Yahak Khan