使用事件处理程序控制div可见性的输入字段

Question

我有一个带有input和onFocus事件监听器的onBlur字段的React应用，如下所示：

<input 
  onFocus={e => {
    e.preventDefault();
    {
      this.setState({...this.state, showContainer:true})
    };
  }}
  onBlur={e => {
    e.preventDefault();
    {
      this.setState({...this.state, showContainer:false })
    };
  }} type="text"  className="headerSearch" />

我有一个div容器，根据此输入字段是否聚焦，它是隐藏/可见的。我遇到的问题是我无法单击容器div内的链接（或可能根本没有任何东西），因为一旦单击容器，就会调用onBlur且div被隐藏。

这不是做这样的事情的正确方法吗？我只希望div在输入框处于焦点状态时出现，但我还需要能够单击div本身...

此外，如果我离开Chrome当前的标签页，则会调用onBlur并隐藏我的容器div，这是不可取的。