ドロップダウンメニューは複数の場所で使用することはできません

Question

私の反応アプリケーションで使用する簡単なドロップダウンメニューを作成しました。ドロップダウンメニューが1つの場所でのみ起動され、私が必要とする場所ではないという問題に直面しています。

たとえば、3つのコンポーネントがあり、3つのコンポーネントすべてにドロップダウンメニューが含まれているとします。第2または第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

はonClickprop ATへのドロップダウンを切り替える処理するために

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

と

window.onclick 

使用コンポーネントstateを使用し、反応しませんtachイベントハンドラ。

例

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