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中创建出现/消失的菜单

回答

相关问题