javascript - 从 React bootstrap 中的另一个组件打开模式

Question

我正在尝试从另一个组件打开模式。这是在我的父组件中:

import { Button, Modal } from 'react-bootstrap';
import React, { useState } from 'react';
import './App.css';
import ModalB from './ModalB';

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  const handleCloseA = () => setShowA(false);
  const handleShowA = () => setShowA(true);

  const handleShowB = ({ handleShow }) => {
    setShowB(handleShow);
  };


  return (
    <div className="App">
      <header className="App-header">

        <Button variant="primary" onClick={handleShowA}>Open A</Button>
        <Button variant="primary" onClick={handleShowB}>Open B</Button>

        <Modal show={showA} onHide={handleCloseA}>
          <Modal.Header closeButton>
            <Modal.Title>In Modal A</Modal.Title>
          </Modal.Header>
        </Modal>

        <ModalB isModalVisible={showB}></ModalB>

      </header>
    </div>
  );
}

export default App;

模态 B 组件:

import { Button, Modal } from 'react-bootstrap';
import React, { useState } from 'react';
import { propTypes } from 'react-bootstrap/esm/Image';

const ModalB = (props) => {
    const [showB, setShowB] = useState(false);
    const handleCloseB = () => setShowB(false);
    const handleShowB = () => setShowB(true);

    return (
        <div>
            <Modal show={props.isModalVisible} onHide={handleCloseB}>
                <Modal.Header closeButton>
                    <Modal.Title>In Modal B</Modal.Title>
                </Modal.Header>
            </Modal>
        </div>
    );

}

export default ModalB;

问题是从主组件中显示 B。虽然显示 modalA 很简单，但我不明白如何告诉 B 从主组件中显示。

感谢您的帮助。

Answer 1

从 ModalB 中删除“show”状态，并从父级传入 handleShowB 处理程序。

const ModalB = ({ isModalVisible, handleShowB }) => {
  return (
    <div>
      <Modal show={props.isModalVisible} onHide={handleShowB}>
        <Modal.Header closeButton>
          <Modal.Title>In Modal B</Modal.Title>
        </Modal.Header>
      </Modal>
    </div>
  );
}

在父传递 handleShowB 处理程序中。这里我们只是传递一个匿名回调来调用 setShowB 状态更新器并将 showB 状态更新为 false。

<ModalB
  isModalVisible={showB}
  handleShowB={() => setShowB(false)}
/>