时间戳

首页 > 解决方案 > 根据输入文本字段的焦点反应条件渲染

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

问题描述

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

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

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

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

标签： javascripthtmlreactjsfocus

解决方案

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

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

该示例仅使用简单的 className 检查来查看当前目标元素是否具有 class 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>

推荐阅读