javascript - 模糊事件 : do not blur if click occurs within element

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 方法，使一个方法覆盖另一个方法。

有没有办法在 React 中做到这一点？

Answer 1

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

检查更新笔

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