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

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方法，以使其中一個覆蓋另一個。

有沒有辦法做到這一點在反應？

來源

2016-10-04 corvid

我的第一個想法是實現反應組件時，用戶點擊外，在這裏你必須製作的Airbnb [執行]（即觸發事件https://github.com/airbnb/反應-日期/斑點/主/ SRC /組件/ OutsideClickHandler.jsx）。然後你可以通過以下方式使用它：' – niba

這很有幫助，但是如果他們按下'tab'移動到下一個輸入字段？ – corvid

下一個輸入應在onfocus事件 – niba

剛剛嘗試過使用onMouseEnter和onMousLeave來有條件地觸發blur()。通過這種方式，顏色調色板對於拾取顏色將是可見的，並且在拾取顏色或在輸入框外單擊時會變得模糊。

檢查updatde筆

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

來源

2016-10-05 05:06:48

上調用'hideColorPallete'。它的工作原理與預期完全相同！謝謝你的回答 – corvid

@corvid很高興幫助。考慮投票並接受答案 –

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

回答

相關問題