求助：点击特定Div时阻止Input的onBlur触发hideDiv函数

这个问题我之前也碰到过！核心原因是当你点击那个Div的时候，input会失去焦点，从而触发onBlur里的hideDiv。下面给你几个实用的解决方案，你可以根据自己的场景选择：

方案1：利用事件的relatedTarget判断焦点去向 #

在hideDiv函数里，检查失去焦点后，焦点是不是落在目标Div上。如果是，就跳过隐藏操作。

首先给目标Div添加一个ref，方便后续判断：

// 组件内定义ref
constructor(props) {
  super(props);
  this.state = { showDiv: false };
  this.targetDivRef = React.createRef();
}

// 渲染目标Div
<div ref={this.targetDivRef}>我是要点击的Div</div>

然后修改hideDiv函数，加入判断逻辑：

hideDiv = (e) => {
  // 检查焦点是否转移到了目标Div上
  if (e.relatedTarget === this.targetDivRef.current) {
    return; // 不执行隐藏操作
  }
  this.setState({ showDiv: false });
}

最后修正input的事件绑定（注意不要直接调用函数，要传递事件对象）：

<input onFocus={() => this.showDiv()} onBlur={(e) => this.hideDiv(e)} />

方案2：阻止Div的mousedown默认行为 #

当点击Div时，阻止mousedown的默认行为，这样input不会失去焦点，自然就不会触发onBlur。这个方法非常简洁，适合Div不需要获取焦点的场景。

// 给目标Div添加onMouseDown事件
<div onMouseDown={(e) => e.preventDefault()}>我是要点击的Div</div>

// 修正input的事件绑定（避免渲染时直接调用函数）
<input onFocus={this.showDiv} onBlur={this.hideDiv} />

注：这里假设showDiv和hideDiv是箭头函数，或者已经通过bind绑定了this。

方案3：用定时器延迟隐藏，点击Div时清除定时器 #

这种方法兼容性最好，适合所有复杂场景。思路是：input失去焦点时不立刻隐藏Div，而是设置一个定时器延迟执行；如果在延迟期间点击了目标Div，就清除定时器取消隐藏。

首先在组件内定义定时器变量：

constructor(props) {
  super(props);
  this.state = { showDiv: false };
  this.hideTimer = null;
}

然后修改showDiv和hideDiv函数：

showDiv = () => {
  // 显示Div时，先清除可能存在的定时器
  if (this.hideTimer) clearTimeout(this.hideTimer);
  this.setState({ showDiv: true });
}

hideDiv = () => {
  // 设置300毫秒后隐藏（时间可以根据需求调整）
  this.hideTimer = setTimeout(() => {
    this.setState({ showDiv: false });
  }, 300);
}

最后给目标Div添加点击事件，清除定时器：

<div onClick={() => {
  if (this.hideTimer) clearTimeout(this.hideTimer);
}}>我是要点击的Div</div>

// 修正input的事件绑定
<input onFocus={this.showDiv} onBlur={this.hideDiv} />

小提醒 #

你原来的代码里onFocus={this.showDiv()}这种写法会在组件渲染时就直接调用showDiv，而不是在焦点触发时调用。正确的写法应该是onFocus={this.showDiv}（函数已绑定this）或者onFocus={() => this.showDiv()}。

内容的提问来源于stack exchange，提问作者Saurav Dutta