React Hooks实现子组件触发父组件输入框聚焦问题求助

问题根源 #

当前实现存在两个关键问题：

1. Modal组件的useEffect依赖为空数组，仅在组件首次挂载时执行，此时弹窗尚未显示，聚焦操作无效；且未监听isShowing状态变化，弹窗弹出时不会触发聚焦逻辑。
2. 弹窗设置了autoFocus={true}，这类模态框组件默认会在打开时自动将焦点锁定在内部元素上，直接覆盖了你对父组件输入框的聚焦操作。

修改方案 #

调整Modal组件的逻辑，确保聚焦时机正确，同时关闭弹窗的自动聚焦：

const Modal = ({ isShowing, hide, forwardRef, input }) => {
  useEffect(() => {
    // 仅当弹窗显示且ref有效时执行聚焦
    if (isShowing && forwardRef.current) {
      // 用0延迟定时器确保聚焦操作在弹窗渲染完成后执行，避免被模态框内部逻辑覆盖
      setTimeout(() => {
        forwardRef.current.focus();
      }, 0);
    }
  }, [isShowing, forwardRef]); // 监听isShowing状态变化

  return (
    <>
      <M
        isOpen={isShowing}
        role="dialog"
        autoFocus={false} // 关闭弹窗自动聚焦
        centered={true}
        size="lg"
        scrollable={false}
      >
        From Parent {input}
      </M>
    </>
  );
};

改动说明 #

• 监听isShowing状态：只有当弹窗打开时才触发聚焦逻辑，保证操作时机正确。
• 关闭autoFocus：阻止模态框自动抢占焦点，避免覆盖父组件输入框的聚焦操作。
• 添加setTimeout：利用JS事件循环机制，让聚焦操作排在模态框内部渲染逻辑之后执行，确保最终焦点落在父组件输入框上。

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