当 onFocus 触发时，React 会阻止 onClick 触发

Question

我的字段 onClick 事件切换下拉列表， onFocus 事件打开它。
当 onFocus 事件被触发时，onClick 事件随后被触发并关闭新打开的下拉菜单。如果 onFocus 被触发，如何防止点击触发？

preventDefault 和 stopPropagation 不起作用，这两个事件总是被触发

<TextInputV2
  label={label}
  onChange={handleInputOnChange}
  onClick={handleOnClick}
  onFocus={handleOnFocus}
  onKeyUp={handleInputOnKeyUp}
  readOnly={!searchable}
  value={inputValue}
/>

......

  const handleOnFocus = (event: React.FocusEvent): void => {
    if (!isOpen) {
      changeIsOpen(true)
    }
  }

  const handleOnClick = (event: React.SyntheticEvent): void => {
    if (!searchable) {
      toggleOpen()
    }
  }

Answer 1

您会想要更改onClick为onMouseDown. 由于事件顺序是

• 鼠标按下
• 改变（聚焦输入）
• 模糊（在聚焦元素上）
• 重点
• 鼠标向上
• 点击
• 双击

来自：这个答案

你想在焦点事件之前阻止默认/stoPropagation，这意味着你必须使用“onMouseDown”在焦点事件被触发之前正确停止它。

在您的情况下，它将是：

<TextInputV2
  label={label}
  onChange={handleInputOnChange}
  onMouseDown={handleOnClick}
  onFocus={handleOnFocus}
  onKeyUp={handleInputOnKeyUp}
  readOnly={!searchable}
  value={inputValue}
/>

<TextInputV2
  label={label}
  onChange={handleInputOnChange}
  onMouseDown={handleOnClick}
  onFocus={handleOnFocus}
  onKeyUp={handleInputOnKeyUp}
  readOnly={!searchable}
  value={inputValue}
/>