Javascript onBlur和onFocus在响应中创建显示/消失的菜单

我正在学习react，正在建造一个小电子商店。我有一个叫做“查看商店”的标签。当用户单击它时，我希望出现一个小的“peek-a-boo”列，让用户查看一些文本或图片。当用户单击其他任何位置时，我希望此列消失

我要做的是定义一个叫做“躲猫猫”的状态道具。当用户单击我的div时，我将peekaboo设置为true。当用户模糊时，我将peekaboo设置为false，但实际情况是onClick起作用，而onBlur不起作用（显示store按钮，但当我不对焦时，它不会再次出现）

类ProductPage扩展组件{
构造函数（）{
超级（）；
this.peekClick=this.peekClick.bind（this）；
this.peekHide=this.peekHide.bind（this）；
此.state={
躲猫猫：假的
};
}
点击查看=（）=>{
this.setState（{peekaboo:true}）；}
躲猫猫=（）=>{
this.setState（{peekaboo:false}）；}
render（）{
返回(
{/*问题在这里*/}
{this.state.peekaboo？（空）：
(
视图存储
)}

我查看了这些stackoverflow帖子，寻找一些想法：

---

我在另一个问题上也发现了onBlur的想法，但它似乎不起作用。

onBlur

只适用于可以聚焦的元素（例如，当按下

选项卡时选择的元素）。该事件永远不会触发

根据您的预期行为，您可能希望探索
onMouseEnter
和
onMouseLeave
我不相信您可以模糊div（因为模糊的反面是焦点，而不是单击）-尝试在页面上的其他位置检测单击？或者在
上检测是否可能？
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>