javascript - 由 `ref` 调用的 React input.focus() 也调用 `onBlur` 事件

Question

我在 React 中有一个输入元素，我想为其设置 onFocus、onBlur 和 ref 回调。当我在其中运行 input.focus() 时，设置 ref 回调会触发 onBlur 事件。

<input
    onFocus={() => {
        props.startSearch(); // set props.active === true
    }}
    onBlur={() => {
        props.endSearch(); // set props.active === false
    }}
    ref={(input) => {
        if (input && props.active) {
            input.focus();
        }
    }}
/>

我有另一个组件分派(dispatch)一个 Action ，将 props.active 设置为 true。这应该关注输入组件。但是，当组件安装时，输入的 onBlur 回调意外触发:

ref => onFocus => onBlur

这是将 props.active 设置为 true，但随后立即将其设置为 false(因为 props.endSearch 触发)。

当我注释掉 input.focus() 并手动单击以聚焦输入时，我得到 onFocus => ref，这是所需的行为。然而，这显然没有“自动聚焦”输入的效果。

---

为什么 input.focus() 会触发 onBlur，我该如何防止这种情况发生？

Answer 1

尝试使用 autoFocus。喜欢:

<input ref="searchBox" onFocus={props.startSearch} onBlur={props.endSearch} autoFocus={props.active} />

编辑:

此外，在您的 componentDidUpdate 中执行(注意上面更新的 ref):

if (this.props.active) {
  this.refs.searchBox.focus();
}