같은 구성 요소에서 반응 렌더링 다중 모달

Question

나는 반응하고 일반적으로 코딩하는 것을 처음으로 접했습니다. 같은 구성 요소에 여러 개의 모달을 렌더링하려고하지만 모든 링크가 마지막 모달의 텍스트를 렌더링하는 것처럼 보이도록 모두 동시에 렌더링됩니다.
여기 상태가 설정되어 어디 :

class Header extends React.Component { 
    constructor() { 
    super(); 
    this.state = {open:false} 
    this.openModal = this.openModal.bind(this); 
    this.closeModal = this.closeModal.bind(this); 
    this.handleModalChangeEnter = this.handleModalChange.bind(this, true); 
    this.handleModalChangeLogin = this.handleModalChange.bind(this, false); 
    } 
    openModal() { 
    this.setState({open: true}); } 
    closeModal() { 
    this.setState({open: false}); } 
    render() { 

는 그리고 여기 모달 건설의 :
이

return (
    <header style={home}> 

    <div style={hello}> 
     <img style={logo} src='public/ycHEAD.png'/> 
     <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p> 
    </div> 

    <div style={subContainer}> 
     <ul style={modalDirectory}> 

     <Button onClick={this.openModal} 
       style={openButton}> 
      <li><a style={tabs}>Enter 
       </a></li> 
     </button> 
     <Modal style={modalCont} 
       isOpen={this.state.open}> 
       <button onClick={this.closeModal} 
         style={xButton}>x</button> 
     </Modal> 

     <button onClick={this.openModal} 
       style={openButton}> 
      <li><a style={tabs}>Login 
       </a></li> 
     </button> 
     <Modal style={modalCont} 
       isOpen={this.state.open}> 
      <p>Account</p> 
      <button onClick={this.closeModal} 
        style={xButton}>x</button> 
     </Modal> 

가 빈 괄호 안의 값이 있어야합니다 -> openModal() & closeModal()?

Answer 1

친구가 도와주었습니다. 다른 사람이 철저한 설명을 제공 할 수있는 경우

return (
    <header style={home}>  
    <div style={hello}> 
     <img style={logo} src='public/ycHEAD.png'/> 
     <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p> 
     </div> 

     <div style={subContainer}> 
     <ul style={modalDirectory}> 

      <li style={tabs}> 
      <button 
       onClick={() => this.openModal('login')} 
       style={openButton}> 
       Enter 
      </button> 
      </li> 

      <li style={tabs}> 
      <button 
       onClick={() => this.openModal('calendar')} 
       style={openButton}> 
       Calendar 
      </button> 
      </li> 

      <li style={tabs}> 
      <button 
       onClick={() => this.openModal('team')} 
       style={openButton}> 
       Meet Us 
      </button> 
      </li> 

     </ul> 
     </div> 


     <Modal 
     style={modalCont} 
     isOpen={this.state.activeModal === 'login'}> 
     <p>1!</p> 
      <button onClick={this.closeModal} 
      style={xButton}>x</button> 
     </Modal> 

     <Modal 
     style={modalCont} 
     isOpen={this.state.activeModal === 'calendar'}> 
     <p>2!</p> 
      <button onClick={this.closeModal} 
      style={xButton}>x</button> 
     </Modal> 

     <Modal 
     style={modalCont} 
     isOpen={this.state.activeModal === 'team'}> 
     <p>3!</p> 
      <button onClick={this.closeModal} 
      style={xButton}>x</button> 
     </Modal> 

    </header> 

수행하십시오 : 코드의 상단 절반은 어떤 변화하는 (정말 도움이 미적 변화는 또한 'HTML'로 만들어졌다) 모달 건설에, 동일하게 유지 그래서! 또한 'bind'를 사용하여이 작업을 수행하는 또 다른 방법이 있지만 어떻게 작동하는지 모릅니다.