React Input组件isFocused状态不同步 点击重置图标无法清空输入值

该问题由浏览器事件触发顺序导致：
当你点击输入框外部的关闭图标时，输入框的onBlur事件会先于右侧图标的onClick事件触发：

1. 点击动作首先让输入框失焦，执行setIsFocused(false)，将聚焦状态更新为否
2. 等onClick事件绑定的handleOnClick方法执行时，读取到的isFocused已经是false，永远无法进入清空输入值的判断分支，最终导致重置功能失效。

你可以根据交互需求任选以下一种方案修复：

• 方案1：移除清空逻辑中多余的聚焦状态判断
  关闭图标本身仅在inputValue有值且isFocused为true时才会渲染，点击时不需要重复判断聚焦状态，直接清空值即可：

  const handleOnClick = () => {
    setInputValue("");
  };
  

• 方案2：阻止点击图标时的默认失焦行为
  给右侧图标绑定onMouseDown事件，阻止默认行为来避免输入框提前失焦，保证点击时isFocused状态仍为true：

  <InputRightElement 
    onClick={handleOnClick}
    onMouseDown={(e) => e.preventDefault()}
  >
    {inputValue.length && isFocused ? <CloseIcon /> : <SearchIcon />}
  </InputRightElement>
  

• 方案3：优化图标显示逻辑
  调整渲染规则，只要输入框存在值就显示关闭图标，不强制绑定聚焦状态，既规避了事件顺序问题，也更符合常规交互习惯：用户输入内容后即使临时失焦，也可以直接点击图标清空，不需要先重新聚焦输入框。

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