怎么打开

Question

我是react新手，正在使用react引导。我有一个完美工作的react应用程序，有两个组件，我使用的是功能组件。这是代码。

应用程序。js

function App() {
  const [modalShow, setModalShow] = useState(false);

  return (
    <>
      <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
      </Button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </>
  );
}

MyVerticallycenteremodal。js

export default function MyVerticallyCenteredModal(props) {
    return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Modal heading
            </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h4>Centered Modal</h4>
                <p>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                    dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                    consectetur ac, vestibulum at eros.
            </p>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>Close</Button>
            </Modal.Footer>
        </Modal>
    );
}

在这个阶段，我的代码工作正常。但是我需要做一些改变。我需要从MyVerticallyCenteredModal组件中删除show和onHide道具，并从Modal组件中访问道具。这是我所做的，

应用程序。js

<MyVerticallyCenteredModal />

MyVerticallycenteremodal。js

<Modal
  show={modalShow}
  onHide={() => setModalShow(false)}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
...
</Modal>

现在我得到一个编译错误，

'modalShow' is not defined
'setModalShow' is not defined

但不从应用程序中移动useState。js到MyVerticallyCenter模式。我该怎么做？

Answer 1

状态由父组件控制

  <Button variant="primary" onClick={() => setModalShow(true)}>
    Launch vertically centered modal
  </Button>

因此，不可能从模态itsef控制模态行为。

但是如果您直接在

我们需要在模态组件中使用一个小按钮，并使用模态本身中的状态来控制：）

Answer 2

onClark（）；应该采取一个事件作为控制鼠标点击：

 onClick={(e) => {setModalShow(false)}};

onHide（）也一样；

注意：您也可以使用“事件”一词代替字母“e”