React中无需点击事件，如何将子组件的state值传递给父组件？

下面提供两种可行方案，分别适用于不同场景：

方法1：通过props传递回调函数（推荐，符合React单向数据流） #

核心逻辑是父组件定义一个接收数据的回调函数，通过props传给子组件；子组件在query状态变化时，主动调用这个回调把最新值传递回去，无需依赖点击事件。

修改后的父组件代码 #

import Child from "../Child"
import { useState } from "react";

const Parent = () => {
    // 父组件维护一份同步自子组件的query值
    const [parentQuery, setParentQuery] = useState("");

    // 定义接收子组件数据的回调函数
    const handleQueryChange = (newQuery) => {
        setParentQuery(newQuery);
        // 这里可以添加其他业务逻辑，比如打印、调用API等
        console.log("子组件传来的query:", newQuery);
    };
    
    return(
        <>
            <p>父组件接收的query: {parentQuery}</p>
            {/* 将回调函数通过props传给子组件 */}
            <Child onQueryChange={handleQueryChange} />
        </>
    );
};
export default Parent 

修改后的子组件代码 #

import { useState, useEffect } from "react";

function Child (props) {
    const [query, setQuery] = useState("sample");

    // 监听query状态变化，一旦更新就调用父组件的回调传递数据
    useEffect(() => {
        props.onQueryChange(query);
    }, [query, props.onQueryChange]);

    // 模拟后续自动修改query的场景（比如接口返回数据、定时器触发）
    useEffect(() => {
        const timer = setTimeout(() => {
            setQuery("新的查询内容");
        }, 2000);
        return () => clearTimeout(timer);
    }, []);
    
    return(
        <div>子组件的query: {query}</div>
    );
}
export default Child

方法2：使用useImperativeHandle+forwardRef（按需使用） #

如果父组件需要主动获取子组件的query值（而非被动接收更新），可以用这种方法通过ref暴露子组件的内部状态。注意：该方法会打破React单向数据流，仅在必要场景使用。

修改后的父组件代码 #

import Child from "../Child"
import { useRef, useEffect } from "react";

const Parent = () => {
    const childRef = useRef(null);

    // 主动获取子组件的query值（示例为组件挂载后获取）
    useEffect(() => {
        if (childRef.current) {
            const childQuery = childRef.current.getQuery();
            console.log("主动获取子组件的query:", childQuery);
        }
    }, []);
    
    return(
        <Child ref={childRef} />
    );
};
export default Parent 

修改后的子组件代码 #

import { useState, useImperativeHandle, forwardRef } from "react";

// 用forwardRef包裹子组件，允许父组件传递ref
const Child = forwardRef((props, ref) => {
    const [query, setQuery] = useState("sample");

    // 向父组件暴露获取query的方法
    useImperativeHandle(ref, () => ({
        getQuery: () => query
    }));

    // 模拟后续修改query的场景
    useEffect(() => {
        const timer = setTimeout(() => {
            setQuery("通过ref获取的新值");
        }, 2000);
        return () => clearTimeout(timer);
    }, []);
    
    return(
        <div>子组件的query: {query}</div>
    );
});

export default Child

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