点击图标清空输入框时输入框失焦导致点击事件无法触发，求可行解决方案

解决方法 #

你遇到的问题本质是事件触发顺序的问题：mousedown → 输入框blur → mouseup → click，点击图标时输入框先触发blur导致图标隐藏，后续的click事件自然无法触发。可以选择以下任意一种方案解决：

方案1：替换click事件为mousedown（推荐，改动最小） #

将图标绑定的onClick改为onMouseDown，该事件触发时机早于输入框的blur事件，可以保证清空逻辑优先执行。如果希望点击清空后输入框仍保持聚焦，可以额外调用e.preventDefault()阻止默认的失焦行为：

<div>
  <input type="text" value={someValueFromState}/>
  <SomeIconComponent 
    onMouseDown={(e) => {
      e.preventDefault() // 可选：阻止输入框失焦
      clearInput()
    }}
  />
</div>

方案2：通过父容器悬停状态扩展显示条件 #

新增容器的悬停状态判断，只要鼠标悬停在输入框和图标的外层容器上，就算输入框暂时失焦也会显示图标，保证点击逻辑正常触发：

import { useState } from 'react'

function InputWithClear() {
  const [someValueFromState, setSomeValueFromState] = useState('')
  const [isInputFocused, setIsInputFocused] = useState(false)
  const [isContainerHovered, setIsContainerHovered] = useState(false)

  const clearInput = () => setSomeValueFromState('')
  const showClearIcon = isInputFocused || isContainerHovered

  return (
    <div
      onMouseEnter={() => setIsContainerHovered(true)}
      onMouseLeave={() => setIsContainerHovered(false)}
    >
      <input
        type="text"
        value={someValueFromState}
        onChange={(e) => setSomeValueFromState(e.target.value)}
        onFocus={() => setIsInputFocused(true)}
        onBlur={() => setIsInputFocused(false)}
      />
      {showClearIcon && <SomeIconComponent onClick={clearInput} />}
    </div>
  )
}

方案3：使用CSS :focus-within控制显示（纯CSS实现，无需额外JS逻辑） #

不要单独依赖输入框的:focus状态控制图标显示，改为通过父容器的:focus-within伪类控制，只要容器内任意元素（包括图标）获得焦点，图标就会保持显示。需要给图标添加tabIndex属性让它可以获得焦点：

/* 对应CSS样式 */
.input-wrapper .clear-icon {
  display: none;
}
.input-wrapper:focus-within .clear-icon {
  display: inline-flex;
}

<div className="input-wrapper">
  <input type="text" value={someValueFromState}/>
  <SomeIconComponent 
    tabIndex={0}
    className="clear-icon" 
    onClick={() => clearInput()}
  />
</div>

内容的提问来源于stack exchange，提问作者howard wolowitz