드롭 다운 메뉴는 여러 장소에서 사용할 수 없습니다.

Question

내 반응 응용 프로그램에서 사용할 간단한 드롭 다운 메뉴를 만들었습니다. 드롭 다운 메뉴가 한 곳에서만 나타나고 원하는 곳이 아닌 곳에서 문제가 발생합니다.

예를 들어 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

는 onClickprop에서에의 드롭 다운을 전환 처리

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

및

window.onclick 

를 사용하여 구성 요소 state을 사용하고 반응하지 않는 tach 이벤트 핸들러. 각각 동일한 ID를 공유 드롭 다운으로

예

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

나는 단지 진짜 빨리보기를 할 수있었습니다,하지만 난 문제를 추측 할 거짓말 - #myDropdown을

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

Answer 3

나는 반응을위한 드롭 다운 상자의 예를 만들었습니다.

https://codesandbox.io/s/k5jk244593