Reagieren Rendern mehrerer Moden in der gleichen Komponente

Question

Ich bin neu zu Reagieren und Codierung im Allgemeinen. Ich versuche, mehrere Modale in der gleichen Komponente zu rendern, aber sie werden alle gleichzeitig gerendert, so dass es aussieht, als würden alle Links den Text im letzten Modal rendern.
Hier ist, wo der Staat festgelegt ist:

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() { 

Und hier ist der modale Aufbau:

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> 

Sollte es einen Wert in den leeren Klammern sein -> openModal() & closeModal()?

Answer 1

Ein Freund half mir mit diesem. Die obere Hälfte der Code gleich bleibt, ändert sich, was in der modal Konstruktion ist (einige wirklich hilfreich ästhetische Veränderungen wurden auch dem ‚html‘ gemacht):

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> 

Wenn jemand anderes eine gründliche Erklärung liefern können, bitte damit! Es gibt auch einen anderen Weg dies mit 'bind' zu tun, aber ich weiß nicht wie.