无法触发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>
  );
}

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

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