onBlurとonFocus in Reactで表示/非表示のメニューを作成する

Question

私は少しの電子店舗を構築しています。私はこのタブを "View Store"と呼んでいます。ユーザーがそれをクリックすると、ちょっとした "peek-a-boo"コラムが表示され、ユーザーにテキストや写真が表示されます。ユーザーが他の場所をクリックすると、この列が消えてしまいます。

私がしていることは、 "peekaboo"と呼ばれる状態の支柱を定義することです。ユーザーがdivをクリックすると、peekabooがtrueに設定されます。ユーザーがぼんやりすると、私はpeekabooをfalseに設定しますが、onClickは動作しますが、onBlurは保存しません（保存ボタンは消えますが、フォーカスが外れても再表示されません）。

class ProductPage extends Component { 
    constructor() { 
    super(); 
    this.peekClick = this.peekClick.bind(this); 
    this.peekHide = this.peekHide.bind(this); 

    this.state = { 
     peekaboo: false 
    }; 
    } 

    peekClick =() => { 
    this.setState({peekaboo: true});} 

    peekHide =() => { 
    this.setState({peekaboo: false});} 

    render() { 
    return (
     <div className="ProductPage"> 
     <div className="ProductPage-Left"> 
     {/* PROBLEM IS HERE */} 
      <div className="leftViewTab" onBlur={this.peekHide}> 
       {this.state.peekaboo ? (null) : 
       (<div className="leftViewText" onClick={this.peekClick}> 
        View Store 
       </div>)} 
      </div> 
     </div> 

私はアイデアのためにこれらのstackoverflowの記事を見て： onclick() and onblur() ordering issue

私はまた別の質問にonBlurイベントのアイデアを見つけましたが、それは動作していないようです。

Answer 1

onBlurは、フォーカスできる要素（たとえば、tabを押しながら選択される要素）にのみ適用されます。そのイベントは決して発動しません。

意図した動作に応じて、onMouseEnterとonMouseLeaveを調べることができます。