Javascript React input.focus（）由'ref'调用，同时调用'onBlur'事件

我想在React中设置

onFocus

、

onBlur

和

ref

回调的输入元素。设置

ref

回调时，在其内部运行

input.focus（）

时，会触发

onBlur

事件，这是不必要的行为

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

{
props.startSearch（）；//设置props.active==true
}}
onBlur={（）=>{
props.endSearch（）；//设置props.active==false
}}
ref={（输入）=>{
如果（输入和道具激活（&P）{
input.focus（）；
}
}}
/>

我有另一个组件，它将动作设置

props.active

分派为true。这应该关注输入组件。但是，当组件装载时，输入的

onBlur

回调意外触发：

ref=>onFocus=>onBlur

这是将

props.active

设置为true，然后立即将其设置为false（因为

props.endSearch

触发）

当我注释掉

input.focus（）

并手动单击以聚焦输入时，我会得到

onFocus=>ref

，这是所需的行为。然而，这显然没有“自动聚焦”输入的效果

---

---

为什么

input.focus（）
 尝试使用
自动对焦
。比如：

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

您的意思是期望的行为是
ref=>onFocus
，对吗？我唯一的猜测是，在您将焦点分配给输入后不久，其他东西正在窃取焦点。焦点在哪里结束？是的，
ref=>onFocus
是理想的行为。活动元素只是
body
，不确定它是如何窃取焦点的…
document.querySelector（“：focus”）
为您提供了什么？
自动聚焦（当
props.active
设置为true时）在刷新页面时似乎会更新，但没有反映属性值的效果。。。换句话说，它不会动态更新。我正在尝试从父组件处理这些有状态操作，我可以从父组件分配和访问引用吗？您不能从父组件分配和访问引用。我的回答与反应状态无关。这只是您的子组件对其道具的反应。没有这样的运气，onBlur在
componentDidUpdate
中的更新后仍在开火……您是否尝试过在将
console.log（document.querySelector（“：focus”）
集中在
componentDidUpdate
中之前放置
？
if (this.props.active) {
  this.refs.searchBox.focus();
}