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

【问题标题】：React conditional rendering depending on focus of input text field根据输入文本字段的焦点反应条件渲染
【发布时间】：2019-03-13 15:07:21
【问题描述】：

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

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

在我的建议组件中，我列出了一些元素。如果用户点击一个元素，我会触发一个 onClick 事件。然而，问题是，当用户点击一个元素时，自然也会触发 onBlur 事件，这会导致整个 Suggestions 组件消失。这会导致 onClick 事件没有被触发..

我真的被这个问题困住了，有什么想法吗？

【问题讨论】：

标签： javascript html reactjs focus

【解决方案1】：

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

下面是一个工作的sn-p，点击进入编辑，会出现一个列表，然后你可以点击列表项，它会控制台记录一两个而不关闭。但是，如果您单击其他任何内容，它将关闭。

该示例仅使用一个简单的 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>

【讨论】：