堆栈内存溢出
  繁体   English   中英

使用 React 的模态

[英]Modals Using React

 原文  2022-03-14 13:48:21  9   1    reactjs/ react-modal

问题描述

我有个问题。 addmodal 从高级搜索模式按钮显示，但我已经定义了高级搜索模式。 如果我单击高级搜索按钮，它会显示添加模式，如果我单击添加按钮，它也会显示添加模式。 我想要一个解决方案，我可以使用 2 个不同的按钮显示 2 个不同的模式。 请帮忙。

主 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}/>

添加 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

高级搜索模态/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

申请.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;
}

1 个解决方案

解决方案1
 0  2022-03-14 16:02:50

两者都打开相同的模式，因为它们都指的是单个 state 变量。 实际上，当您单击按钮时，很可能会呈现两种模态，但一个会覆盖另一个，因此您只会看到一个。 当您单击任一按钮时， show设置为 true，并且两个模态都打开，因为两个模态都绑定到show 。 因此，您应该为每个模态使用 2 个单独的状态。 请参考以下更正后的代码：

主 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}/>

添加 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

高级搜索 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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用React的模式 如何使用带有React / Redux的组件将2个模态合并为1个？ 使用redux在react-boostrap中单击外部模态 我如何使用反应钩子将数据值传递给模态？ 如何使用带有 react-router-dom 的全局 state 显示模式？ React 0.13中的模态 React Native - 模态覆盖 Modals React Native 的问题 在React中重用模态 带有 React Hook 的多个模态
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM