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

Question

我有一个输入元素做出反应，我想一套onFocus，onBlur和ref回调。当我在其中运行时，设置ref回调具有触发onBlur事件的不需要的行为input.focus()。

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

我有另一个组件将动作设置分派props.active为 true。这应该关注输入组件。但是，当组件挂载时，输入的onBlur回调会意外触发：

ref => onFocus => onBlur

这是设置props.active为真，但随后立即将其设置为假（因为props.endSearch触发）。

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

---

为什么input.focus()触发触发onBlur以及如何防止这种情况发生？

Answer 1

尝试使用autoFocus. 喜欢：

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

编辑：

另外，在你的componentDidUpdatedo 中（注意上面的更新ref）：

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