使用 onBlur 在 React 组件中设置焦点

Question

我在 React 组件中附加了一个 onBlur 事件处理程序，其中逻辑将焦点设置回目标元素（并在 TypeScript 中编写）。

emailBlur(e: React.FocusEvent<HTMLInputElement>) {
    e.currentTarget.focus();
    e.preventDefault();
    // re-ordering these statements makes no difference
}

这是绑定的

<input type="email" onBlur={this.emailBlur} />

此外，构造函数包含

this.emailBlur = this.emailBlur.bind(this);

但是焦点永远不会被设置——如果我从目标元素单击到另一个元素，焦点永远不会回到目标元素。

为什么焦点没有设置回目标元素？

Answer 1

您是否尝试过使用 e.currentTarget 和这样的超时？

e.preventDefault();
const target = e.currentTarget;
setTimeout(
    function () {
        target.focus();
    },
    5
);

Answer 2

为什么焦点没有设置回目标元素？

使用setTimeout，以便在再次🌹 focus之前完成blur