React中孙组件onFocus无法更新祖父组件状态的解决方法

算力阿峰

2026-8-8

React子组件聚焦输入框时更新祖父组件状态的实现方案

组件层级关系：

<GrandParent />
<Parent />
<Child />

需求：当子组件（Child）的输入字段获得焦点时，更新祖父组件（GrandParent）的focusDiv状态。

原代码存在的问题

你的代码里有两个关键错误，导致状态无法正常更新：

Parent组件未接收props参数：直接使用props.setFocusDiv会报错，因为组件函数没有声明接收props
Child组件未接收props参数：同样，props.setFocusDiv无法访问到传递过来的更新函数

修正后的完整代码

祖父组件（GrandParent）

原代码逻辑没问题，直接保留（可优化状态显示的可读性）：

import { useState } from 'react';

const GrandParent = () => {
  const [focusDiv, setFocusDiv] = useState(false);
  return (
    <>
      <h1>GrandParent</h1>
      <p>{focusDiv ? '输入框已聚焦' : '输入框未聚焦'}</p>
      <Parent setFocusDiv={setFocusDiv} />
    </>
  )
}

父组件（Parent）

需要接收props，并将setFocusDiv传递给子组件：

const Parent = (props) => {
  return (
    <>
      <h1>Parent</h1>
      <Child setFocusDiv={props.setFocusDiv} />
    </>
  )
}

子组件（Child）

接收props，在输入框的onFocus事件中调用更新函数。如果只有这一个输入框，可省略id判断；若有多个输入框需要区分，再保留id校验：

const Child = (props) => {
  // 单输入框简化版
  const handleFocus = () => {
    props.setFocusDiv(true);
  }

  // 多输入框区分版（可选）
  // const handleFocus = (e) => {
  //   if (e.target.id === "textID") {
  //     props.setFocusDiv(true);
  //   }
  // }

  return (
    <>
      <h1>Child</h1>
      <input type="text" id="textID" onFocus={handleFocus} />
    </>
  )
}