使用 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

Why isn't the focus being set back to the target element?

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

Answer 2

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

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

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

Using onBlur to set focus in a React component

reactjs

typescript

event-handling

onblur

onfocus