Reactjs 单击弹出窗口时如何保持react模式打开？

我是个新手。在一系列youtube视频之后，我正在做一个项目

我的项目用一些关键字搜索食谱。我试图添加一个过滤器，以过滤出一些配方与反应模式。我知道我可以用React模式创建一个弹出窗口，但不确定这是否是创建弹出窗口的最佳方式

以下是我的过滤器弹出窗口的屏幕截图：

我现在遇到的问题是，当我点击输入栏时，窗口关闭了

以下是模态组件：

class Filter extends Component {
render() {
        return ReactDOM.createPortal(
          <div className="background"
            style={{
              position: 'absolute',
              top: '0',
              bottom: '0',
              left: '0',
              right: '0',
              display: 'grid',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'rgba(0,0,0,0.3)',
            }}
            onClick={this.props.onClose}
          >
            <div
              style={{
                padding: 20,
                background: '#fff',
                borderRadius: '2px',
                display: 'inline-block',
                minHeight: '300px',
                margin: '1rem',
                position: 'relative',
                minWidth: '300px',
                boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
                justifySelf: 'center',
              }}
            >
              <form className="filter-form">  
                <div>
                    <p>Max Calories: </p>
                    <input type="text" value={this.state.input} onChange={this.props.handler}></input>
                </div>
              </form>
              <hr />
              <button onClick={this.props.onClose}>Save</button>
            </div>
          </div>,
          document.getElementById('filter-popup')
        )
      }
}

类过滤器扩展组件{
render（）{
返回ReactDOM.createPortal(
最大热量：


拯救
,
document.getElementById（'filter-popup'）
)
}
}

---

如果需要其他代码，请告诉我。

问题是因为

onClick={this.props.onClose}

在

上，如果用户单击模式的任何位置，我不希望模式关闭。除了关闭按钮。非常感谢@Nithish！这很有效。然后从
中删除
onClick={This.props.onClose}
应该会有所帮助。