点击弹窗外部关闭Advanced Search组件并同步设置showTab状态为False的实现方案

这个问题的核心是：你用的基于Bootstrap的Modal组件，在通过点击外部背景或者关闭按钮关闭时，只会自行隐藏DOM元素，但不会主动通知你的React组件更新状态，所以我们得手动监听Modal的关闭事件来同步showTab的值。

下面是具体的实现方案：

1. 新增状态重置方法：在Search组件里添加一个closeTab方法，专门用来把showTab状态设为false。
2. 监听Modal关闭事件：组件挂载完成后，监听Bootstrap Modal原生的hide.bs.modal事件（这个事件会在Modal开始隐藏时触发），触发时调用closeTab同步状态。
3. 清理监听避免泄漏：组件卸载前移除监听事件，防止内存泄漏。
4. 小细节修正：React中DOM元素的类名需要用className而非class，你代码里的class建议统一改成className，避免潜在的渲染问题。

修改后的Search组件代码如下：

class Search extends Component {
  state = { doctors: [], showTab: false }

  openTab = () => {
    this.setState({showTab: true});
    console.log('openTab state', this.state);
  }

  closeTab = () => {
    this.setState({showTab: false});
  }

  componentDidMount() {
    // 监听modal的隐藏触发事件
    document.getElementById('myModal').addEventListener('hide.bs.modal', this.closeTab);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    document.getElementById('myModal').removeEventListener('hide.bs.modal', this.closeTab);
  }

  render() {
    let advancedSearch = null;
    if (this.state.showTab === true) {
      advancedSearch = (<AdvancedSearch />)
    }
    return (
      <div className="row">
        <div className="col-md-2">
          <div className="form-group">
            <button className="btn btn-md btn-primary" data-toggle="modal" data-target="#myModal" onClick={this.openTab}>Advanced Search</button>
          </div>
        </div>
        {advancedSearch}
      </div>
    )
  }
}

如果你想让组件间耦合度更低，也可以给AdvancedSearch组件传递一个onClose props，然后在Modal内部的关闭逻辑里调用这个方法，但上面的方案更贴合你当前的代码结构，利用Bootstrap原生事件就能快速解决状态同步问题。

内容的提问来源于stack exchange，提问作者ShridharK