我有一個組件,它的外觀如下所示。模糊事件:如果在元素內發生點擊,請勿模糊
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
方法,以使其中一個覆蓋另一個。
有沒有辦法做到這一點在反應?
我的第一個想法是實現反應組件時,用戶點擊外,在這裏你必須製作的Airbnb [執行](即觸發事件https://github.com/airbnb/反應-日期/斑點/主/ SRC /組件/ OutsideClickHandler.jsx)。然後你可以通過以下方式使用它: ' –
niba
這很有幫助,但是如果他們按下'tab'移動到下一個輸入字段? – corvid
下一個輸入應在onfocus事件 – niba