使用 React 的模态

Question

I have a problem. The addmodal is showing from the advanced search modal button, but I have already defined the advancedsearch modal. If I click the advanced search button, it is hsowing the add modal, if I click the add button, it is also showing the add modal. I want a solution where I can display 2 different modals using 2 different buttons. Please Help.

Main App.js:

<button onClick={()=> setShow(true)} className="leftbtns adv-srch-btn"id="adv-srch-modal">ADVANCED SEARCH</button>
  <Advsrchmodal onClose={()=> setShow(false)} show={show}/>
  <button onClick={()=> setShow(true)} className="rightbtns add-btn" id ="add-odal">ADD</button>
  <Add onClose={()=> setShow(false)} show={show}/>

Add Modal.js

import React from 'react'

const Addmodal= props=> {
if(!props.show){
  return null
}
return (
<div className='modal overlay' id= 'add-modal '>
  <div className="modal-content" id= 'add-modal '>
        <div className="modal-header" id= 'add-modal '>
            <h4 className="modal-title" id= 'add-modal '>Add</h4>
        </div>
        < div className="modal-body" id= 'add-modal '>
            <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
            <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
            <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
            <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
            <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
            <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
            <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
            <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
        </div>
        <div className="modal-footer" id= 'add-modal '>
            <button className="addbtn " id= 'add-modal '>ADD</button>
            <button className="cancel" id= 'add-modal ' onClick={props.onClose}>CANCEL</button>
        </div>
  </div>
</div>
  )
  }

 export default Addmodal

Addvanced Search Modal/js{

import React from 'react'

const Advsrchmodal = props=> {
if(!props.show){
    return null
}
return (
<div className='modal overlay' id="adv-srch-modal" >
    <div className="modal-content"id="adv-srch-modal">
        <div className="modal-header"id="adv-srch-modal">
            <h4 className="modal-title"id="adv-srch-modal"> Advance Search</h4>
        </div>
        < div className="modal-body"id="adv-srch-modal">
            <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
            <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
            <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
            <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
            
        </div>
        <div className="modal-footer"id="adv-srch-modal">
            <button className="advsrchbtn"id="adv-srch-modal">SEARCH</button>
            <button className="cancel"id="adv-srch-modal" onClick={props.onClose}>CANCEL</button>
        </div>
    </div>
</div>
)
}

export default Advsrchmodal

App.css

        .modal{
  /*display: none;*/
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.modal-content{
  background-color: #2b404d ;
  width:500px;
  border-radius: 10px;
}
.modal-title{
  font-size: 25px;
  display: flex;
  color: white;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 80px;
  justify-content: left;
}
.modal-body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 35px;
  margin-right: 10px;
  margin-left: 10px;
}

.modal-input{
  border-radius: 5px;
  padding: 10px 0;
  border: none;
  justify-content: center;
}
.addbtn{
  padding: 5px 110px;
  margin-right: 10px;
  border: 1px solid white;
  justify-content: center;
  background-color: #2b404d;
  color: white;
}
.advsrchbtn{
  padding: 5px 95px;
  background-color: #2b404d;
  margin-right: 10px;
  border: 1px solid white;
  color: white;
}
.cancel{
  padding: 5px 90px;
  border: 1px solid white;
  background-color: #2b404d;
  color: white;
}
.modal-footer{
  margin-top: 20px;
  justify-content: center;
  background-color: #2b404d;
}

Answer 1

Both are opening up the same modal because they are both referring to a single state variable. In truth, most likely both modals are rendered when you click on the button but one covers the other so you only see one. When you click either button, show is set to true, and both modals open because both modals are tied to show . You should therefore use 2 separate states for each of the modal. Refer to below corrected code:

Main App.js:

const [showAdd, setShowAdd] = useState(false);
const [showAdvanced, setShowAdvanced] = useState(false);

<button onClick={()=> setShowAdvanced(true)} className="leftbtns adv-srch-btn"id="adv-srch-modal">ADVANCED SEARCH</button>
  <Advsrchmodal onClose={()=> setShowAdvanced(false)} showAdvanced={showAdvanced}/>
  <button onClick={()=> setShowAdd(true)} className="rightbtns add-btn" id ="add-odal">ADD</button>
  <Add onClose={()=> setShowAdd(false)} showAdd={showAdd}/>

Add Modal.js

import React from 'react'

const Addmodal= props=> {
if(!props.showAdd){
  return null
}
return (
<div className='modal overlay' id= 'add-modal '>
  <div className="modal-content" id= 'add-modal '>
        <div className="modal-header" id= 'add-modal '>
            <h4 className="modal-title" id= 'add-modal '>Add</h4>
        </div>
        < div className="modal-body" id= 'add-modal '>
            <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
            <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
            <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
            <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
            <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
            <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
            <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
            <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
        </div>
        <div className="modal-footer" id= 'add-modal '>
            <button className="addbtn " id= 'add-modal '>ADD</button>
            <button className="cancel" id= 'add-modal ' onClick={props.onClose}>CANCEL</button>
        </div>
  </div>
</div>
  )
  }

 export default Addmodal

Advanced Search Modal.js

import React from 'react'

const Advsrchmodal = props=> {
if(!props.showAdvanced){
    return null
}
return (
<div className='modal overlay' id="adv-srch-modal" >
    <div className="modal-content"id="adv-srch-modal">
        <div className="modal-header"id="adv-srch-modal">
            <h4 className="modal-title"id="adv-srch-modal"> Advance Search</h4>
        </div>
        < div className="modal-body"id="adv-srch-modal">
            <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
            <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
            <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
            <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
            
        </div>
        <div className="modal-footer"id="adv-srch-modal">
            <button className="advsrchbtn"id="adv-srch-modal">SEARCH</button>
            <button className="cancel"id="adv-srch-modal" onClick={props.onClose}>CANCEL</button>
        </div>
    </div>
</div>
)
}

export default Advsrchmodal