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

Question

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

Here is a simplified codepen recreation

主要问题在于：

<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