onBlur和onFocus在React中創建出現/消失的菜單

-1

我正在學習反應，正在建造一個小電子商店。我有這個標籤叫做「View Store」。當用戶點擊它時，我想要出現一個「peek-a-boo」列，讓用戶查看一些文字或圖片。當用戶點擊其他任何地方時，我希望此列消失。onBlur和onFocus在React中創建出現/消失的菜單

我所做的是定義一個名爲「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>

我看着這些計算器職位的想法： onclick() and onblur() ordering issue

我還發現另一個問題的onblur主意，但它似乎並不奏效。

來源

2017-05-04 RebeccaK375

我不相信你可以模糊一個div（因爲模糊的對立點是焦點，而不是點擊） - 嘗試檢測頁面上其他地方的點擊？或者''也許？ – Toby

onBlur僅適用於可以聚焦的元素（例如，在按tab時將被選中的元素）。那件事永遠不會開火。

根據您的預期行爲，您可能需要了解onMouseEnter和onMouseLeave。

來源

2017-05-04 16:49:12 gravityplanx

啊，謝謝。會嘗試。 – RebeccaK375

onBlur和onFocus在React中創建出現/消失的菜單

回答

相關問題