如何在 React 的另一个模态中打开一个模态？

Question

我有 2 个组件，每个组件都有一个模态框。我希望通过另一个按钮打开其中一个模式，目前单击该按钮只会关闭当前活动模式，但不会打开新模式。

//Modal 1

<div className="modal fade" id="myModal">
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header d-flex justify-content-center">
                        <h4 className="modal-title">Supplier Name</h4>
                    </div>
                
                    <div className="modal-body">
                        <h3 className="text-center mt-2">Search Bar</h3>
                        <form>
                            <input 
                            type="text" 
                            className="form-control"      
                            />
                        </form>
                        <table className="table mt-5">
                            <thead>
                                <tr>
                                    <th>Supplier Name</th>
                                    <th>Choose Supplier</th>
                                </tr>
                            </thead>
                            <tbody>
                                {suppliers.map(supplier => (
                                    <tr key={supplier.supplier_id}>
                                        <td>{supplier.supplier_name}</td>
                                        <td><button className="btn btn-info" onClick={()=> chooseSupplier(supplier.supplier_id)} data-dismiss="modal">Choose Supplier</button></td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                
                
                    <div className="modal-footer">
                        <AddNewSupplier/>
                        <button type="button" className="btn btn-danger">Close</button>
                    </div>
                </div>
            </div>
        </div>

特别是这里的 [AddNewSupplier] 按钮应该 link 到第二个模式：

<div className="modal-footer">
    <AddNewSupplier/>
    <button type="button" className="btn btn-danger">Close</button>
</div>

我希望能够从这个模态打开第二个

//Modal 2

<a data-dismiss="modal" data-toggle="modal" href="#myModal" className="btn btn-primary">Launch modal</a>
        
  <div className="modal fade" id="myModal" role="dialog">
    <div className="modal-dialog">
    
      
      <div className="modal-content">
        <div className="modal-header">
          <button type="button" className="close" data-dismiss="modal">&times;</button>
          <h4 className="modal-title">Modal Header</h4>
        </div>
        <div className="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

我正在使用 React、Express、Bootstrap 4. 感谢您的帮助！

Answer 1

看看你应该如何在 React 中使用 Boostrap 模态：https://www.pluralsight.com/guides/working-with-bootstraps-modals-react

基本上，您安装 npm 包：npm i react-bootstrap bootstrap 然后，从包中导入模态框，并将其用作包装内容的组件：

 <Modal>
  //your content here
 </Modal>

现在模式应该由状态管理，所以你给它一个状态：

const [isModalOneOpen, setIsModalOneOpen] = useState(false) //modal is closed

现在您可以使用该状态将其作为道具传递给模态：

<Modal show={isModalOneOpen}>
  //your content here and lets add a button to open the second modal from here:
    <button onClick={() => setModalTwoOpen(true)}>Modal 1 will open</button>
</Modal>
<button onClick={() => setIsModalOneOpen(true)}>Open Modal 1</button> //this button will open the first modal

现在，让我们添加第二个模态框，与第一个模态框相同，但状态不同：

const [isModalTwoOpen, setIsModalTwoOpen] = useState(false);

<Modal show={isModalTwoOpen}>
  //your content here
</Modal>

现在，要从任何地方关闭模态框，您只需将状态设置为要关闭的模态框的 false，例如：

<Modal show={isModalTwoOpen}>
  //your content here
  <button onClick={() setIsModalTwoOpen(false)}>Close this modal</button>  
</Modal>

注意：如果 Modal 1 在一个组件中，而 Modal 2 在另一个组件中，那么您需要从父组件管理两个模态的状态。此外，如评论中所述，在模态上打开模态并不是一种很好的用户体验，只是将其作为设计中的旁注。

如何在 React 的另一个模态中打开一个模态？

How to open a modal within another modal in React?

javascript

express

reactjs

bootstrap-4