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

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很高兴帮助。考虑投票并接受答案 –

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

回答

相关问题