模糊事件：如果在元素内发生单击，请勿模糊

Question

我有一个视觉上看起来如下的组件。

这是一个简化的codepen娱乐 。

主要问题在于：

<div className={styles.colorPicker}>
  <input
    readOnly
    type="text"
    value={color}
    onFocus={this.showColorPalette}
    onBlur={this.hideColorPalette}
  />
  <Palette
    color={color}
    onSelect={this.selectColor}
  />
</div>

预期的行为是，当它们模糊组件时，调色板应该隐藏。 但是 ，如果他们点击调色板中的某些内容，则不应隐藏调色板。

因为单击调色板会使输入模糊，所以它将隐藏调色板。 我找不到一种方法来调整调色板的onClick方法和输入的onBlur方法，使得一个覆盖另一个。

有没有办法做出反应？

Answer 1

刚尝试使用onMouseEnter和onMousLeave来有条件地触发blur() 。 通过这种方式，颜色调色板将在拾取颜色时可见，并且在拾取颜色时会模糊或在输入框外部单击。

检查更新笔

http://codepen.io/pranesh-r/pen/EgoaGK?editors=0110