模糊事件：如果在元素內發生單擊，請勿模糊

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