下拉菜单无法在多个地方使用

Question

我创建了一个简单的下拉菜单，可以在我的react应用程序中使用。我遇到的问题是下拉菜单只在一个地方而不是我想要的地方触发。

例如，假设有3个组件，我将所有3个组件的下拉菜单包含在内。当我单击第二个或第三个组件上的下拉图标时，它总是打开第一个组件中的下拉菜单。我该如何解决这个问题？

下拉菜单

class DropDown extends Component {

    constructor(props) {
        super(props);

        this.myFunction = this.myFunction.bind(this);

    };

    myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    render() {

        window.onclick = function (event) {
            if (!event.target.matches('.user_settings_icon')) {

                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }

        return (
            <div className="dropdown small_font">
                {/*<img src={settings} onClick={this.myFunction} className="user_settings_icon"></img>*/}
                <i className="fa fa-cog user_settings_icon" style={{marginTop: '6px'}} onClick={this.myFunction}
                   aria-hidden="true"></i>
                <div id="myDropdown" className="dropdown-content">
                    {/*<div id="myDropdown" className={this.props.actionDropDownCSS}>*/}
                    <a className="dropdown_item"><i className="fa fa-trash-o margin_right10px" aria-hidden="true"></i>Delete</a>
                    <a className="dropdown_item"><i className="fa fa-flag-o margin_right10px" aria-hidden="true"></i>Report</a>
                    <a className="dropdown_item"><i className="fa fa-minus-square-o margin_right10px"
                                                    aria-hidden="true"></i>Unfriend</a>
                    <a className="dropdown_item"><i className="fa fa-sign-out margin_right10px" aria-hidden="true"></i>Leave
                        group</a>
                </div>
            </div>

        );
    }
}
export default DropDown;

Answer 1

不要使用

document.getElementById("myDropdown").classList.toggle("show")

和

window.onclick

使用组件state处理切换下拉列表和React的onClick prop以附加事件处理程序。

示例

class DropDown extends React.Component {
  constructor() {
    super()
    this.state = {
      open: false
    }
  }
  showMenu() {
    if(this.state.open) {
      return (
        <ul>
          <li>Add</li>
          <li>Delete</li>
        </ul>
      )
    }
  }
  handleClick() {
    this.setState({
      open : !this.state.open
    })
  }
  render() {
    return (
      <div>
        <span onClick={this.handleClick.bind(this)}>Menu</span>
        { this.showMenu() }
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <DropDown />
        <DropDown />
        <DropDown />
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

我只能快速看一下，但我猜这个问题在于每个下拉列表都有相同的ID - #myDropdown

myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

Answer 3

我已经为下拉框创建了一个示例作为反应。

https://codesandbox.io/s/k5jk244593