同一のコンポーネント内で複数のモーダルをリアクションレンダリングする

Question

私はリアクションと一般的なコーディングに慣れています。私は同じコンポーネント内に複数のモーダルをレンダリングしようとしていますが、すべてのリンクが最後のモーダルでテキストをレンダリングしているように、すべて同時にレンダリングされています。 ）> openModal（）& closeModal（ -

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> 

空の括弧内の値があるはずです：

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

そしてここでは、モーダル建設です：ここでは
は状態が設定されている場所ですか？

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'を使ってこれを行う別の方法もありますが、どうすればよいか分かりません。