ぼかしイベント：要素内でクリックが発生した場合はぼかしを適用しない

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メソッドと調整する方法が見つからないので、もう一方のメソッドをオーバーライドする方法はありません。

反応でこれを行う方法はありますか？

Answer 1

blur()を条件付きでトリガーするには、onMouseEnterとonMousLeaveを使って試してみました。これにより、カラーパレットは色を選択するために表示され、色を選択するか、入力ボックスの外側をクリックするとぼやけます。

私の最初のアイデアは、ユーザーが外にクリックしたときにイベントを発生コンポーネントを反応させる実装するため、ここであなたがAirbnb [実装]（https://github.com/airbnb/を持っているupdatdeペンに

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