使用嵌套的 onFocus 和 OnBlur 来反应冒泡

Question

我有一个包含三个组件的场景，每个组件分别处理 onFocus 和 onBlur。虽然每个组件单独工作时都运行良好，但当它们作为父组件、子组件和孙子组件一起工作时，我遇到了问题。

我将提供一个表现出类似行为的简化示例：

const handleFocusParent = (e) => {
    e.stopPropagation();
    console.log("Focus: Parent is focused");
}

const handleBlurParent = (e) => {
    e.stopPropagation();
    console.log("Blur: Parent loses focus");
}

return (
    <div
        style={{ width: "500px", height: "800px", border: "1px solid black" }}
        onFocus={handleFocusParent}
        onBlur={handleBlurParent}
        tabIndex={0}
    >
        <input
            type="text"
            onFocus={(e) => {
                e.preventDefault();
                // e.stopPropagation();
            }}
            onClick={(e) => {
                e.preventDefault();
                // e.stopPropagation();
            }}
        />
    </div>
);

问题是每次我聚焦于输入时，父 div 就会失去焦点。

1. 直接点击输入时的日志： “专注：家长专注”

2. 当我单击父级中的某个位置（而不是 div 上）时的日志是： “专注：家长专注”

但是，当我点击输入时，就出现问题了，日志为： “模糊：家长失去焦点” “专注：家长专注”

这种行为对我来说是有问题的，因为点击输入时家长不应该失去焦点。

我尝试在 Stack Overflow 上发布此内容，但收到错误：

“您的帖子似乎包含未正确格式化为代码的代码。请使用代码工具栏按钮或 CTRL+K 键盘快捷键将所有代码缩进 4 个空格。”

有人可以帮助我理解并解决这个问题吗？

Answer 1

您想通过这种方式实现什么目标，例如您以这种形式这样做的主要动机是什么？