Question

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

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

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

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

Answer 1

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

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

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

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

1 个答案: