根据输入文本字段的焦点来反应条件渲染

Question

我有一个Search组件，它呈现以下子组件：SearchBar和Recommendations。

我只想在SearchBar中的输入具有焦点时才呈现“建议”。 为此，我使用了onFocus事件，该事件触发了父组件（搜索）内部的回调。 当我在输入字段之外单击时，我使用onBlur。 条件渲染有效，但是存在问题。

在“建议”组件中，列出了一些元素。 如果用户单击某个元素，则会触发一个onClick事件。 但是，问题在于，当用户单击某个元素时，自然也会触发onBlur事件，这会导致整个“建议”组件消失。 这将导致不会触发onClick事件。

我真的陷在这个问题上，有什么想法吗？

Answer 1

一种解决方案是不使用OnBlur，而是捕获单击/或将事件集中在根元素上，然后检查是否要关闭。

下面是一个显示此内容的工作片段，单击进入编辑，将出现一个列表，然后您可以单击列表项，它将控制台记录一两个日志而不关闭。 但是，如果您单击其他任何按钮，它将关闭。

该示例仅使用简单的className检查来查看当前目标元素是否具有类no-close ，否则将关闭列表。

 class Form extends React.Component { constructor () { super(); this.state = {showList: false}; } render () { return <div onClick={ (e) => { if (!e.target.classList.contains("no-close")) this.setState({showList: false}); } }> <input className="no-close" onFocus={() => this.setState({showList: true})}/> {this.state.showList ? <div> <ul> <li className="no-close" onClick={() => console.log("one")}>One</li> <li className="no-close" onClick={() => console.log("two")}>Two</li> </ul> </div> : null} <div><br/><br/>Just some text, clicking this should not keep list open, if it's open</div> </div> } } ReactDOM.render(<Form/>, document.getElementById("mount")); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="mount"></div>