Question

我在React中有一个输入元素，我想设置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设置为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(); }

由`ref`调用的react input.focus（）也调用`onBlur`事件

1 个答案: