Question

我有一个React js App（请不要使用JQuery）下拉菜单，单击▼字符时会触发。在下面的代码中，只有再次单击相同的▼，下拉菜单才会消失。我想让它在用户单击页面上其他任何位置时消失。当用户也单击页面上的其他任何地方时，如何更改下面的代码以使下拉菜单消失，而不仅仅是单击相同的图标▼？

切换图标：

      <span className="show_more" onClick={this.toggleOptions}>
        <MaterialIcon icon="keyboard_arrow_down" />
      </span>

切换代码：（由许多组件使用，因此修复程序只能在这里吗？）

import React, { Component } from 'react'
...
import MaterialIcon from '../icons/material-icon'
import HeaderLogo from './logo'

export default class Header extends Component {
  state = {
    showOptions: false,
  }

  toggleOptions = () => this.setState({ showOptions: !this.state.showOptions })

  render() {
    let { showOptions } = this.state

    return (
      <div className="header">
        <div className="row-container container">
          <div className="col-l">
            <HeaderLogo />
          </div>
          <div className="col-m">
            <Search />
          </div>
          <div className="col-r">
            <div className="header_right">
              <HeaderTopLinks />
              <span className="show_more" onClick={this.toggleOptions}>
                <MaterialIcon icon="keyboard_arrow_down" />
              </span>
            </div>

            {showOptions ? (
              <HeaderOptions toggleOptions={this.toggleOptions} />
            ) : null}
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

The answer can be found here

但是，总而言之，您必须听取对文档的单击，并编写一个函数，该函数可以遍历树并告诉您单击是在组件内部还是外部进行的

以下是该链接中要添加到您组件中的重要部分：

  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      alert('You clicked outside of me!');
      this.setState({ showOptions: false });
    }
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  render() {
    let { showOptions } = this.state;

    return <div className="header" ref={(node) => this.setWrapperRef = node}>...all the rest of the component goes here...</div>;
  }

记录下来，有很多方法可以做到这一点，这只是一种方法。

Reactjs-切换下拉菜单，而不是单击页面上的任意位置

1 个答案: