无法触发 onClick 事件

Question

我有一个带有 input 和 FontIcons 作为子元素的 Div 元素。 当我在输入控制器中输入或更新任何值并将焦点移出该值时，将调用 onBlur 事件。 在这里，我在字体图标上也有一个点击句柄，但它没有按预期工作。

当我更新输入元素并点击 FantoIcon 时，只触发了模糊事件而不是点击事件。

我们如何触发点击而不是模糊事件？我尝试保留 zIndext 但没有运气

<div>
    <input onBlur={this.onBlurHandler}>
    <FontIcon onClick ={this.clickHandle}>
</div>

Answer 1

<FontIcon> 可能没有收到额外的 props。如果是你的组件，你可以添加它：

export const FontIcon({ propA, propB ...props }) {
  return (
    <div {...props}>
      // whatever goes here
    </div>
  );
}

如果它不是您的组件，则将其包装在 <button> 或 div 中并使用 role=button：

<button onClick={this.clickHandle}>
  <FontIcon />
</button