我怎样才能让这个 React Bootstrap Modal 正常工作？

Question

我正在 on/attempting 复制一个练习，我正在尝试向文件添加模式按钮。我有来自 React Bootstrap 的按钮和模式，但是，我无法显示实际的模式。我使用的是 React-Bootstrap 的文档，但无法显示实际模态，我尝试导入各种模态但无济于事，我的代码中是否遗漏了什么？

import React from 'react';
import { Modal, Form, FormControl, Button, ButtonToolbar, InputGroup } from 'react-bootstrap';
import { connect } from 'react-redux';

import { addItem } from '../actions/itemActions';


function ItemModal(props) {

return (
  <div>
    <Button
      variant="dark"
      style={{marginBottom: '2em'}}
    >Add Item
    </Button>

    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
    <Modal.Header closeButton>
      <Modal.Title id="contained-modal-title-vcenter">
        Add to Shopping List
      </Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <Form>
        <Form.Label for="item">Item</Form.Label>
        <InputGroup className="mb-3">
          <FormControl
            type="text"
            name="name"
            id="item"
            aria-label="Add Shopping Item"
            aria-describedby="basic-addon2"
          />
        <InputGroup.Append>
          <Button onClick={props.onHide} variant="outline-dark">Add</Button>
        </InputGroup.Append>
      </InputGroup>
    </Form>
  </Modal.Body>
</Modal>
</div>
);
}

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


return (
<ButtonToolbar>
  <Button variant="dark" onClick={() => setModalShow(true)}>
    Add Item
  </Button>

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


export default connect()(ItemModal);

我确实有这段额外的代码，虽然可以用来打开模式，但我认为它不适用于此版本的 Bootstrap?

 state = {
  modal: false,
  name: ''
 }

 toggle = () => {
  this.setState({
  modal: !this.state.modal
 });
};

 onChange = (e) => {
  this.setState({ [e.target.name]: e.target.value });
 }

Answer 1

从你的代码片段中，我发现了一个问题。

您在一个文件中有 2 个组件，App 和 ItemModal。 App 组件是您的基础/父组件，ItemModal 是您的子组件。

但是你导出的是子组件，

export default connect()(ItemModal);

你应该导出父组件，

export default connect()(App);

我怎样才能让这个 React Bootstrap Modal 正常工作？

How can I get this React Bootstrap Modal Working properly?

javascript

reactjs

react-bootstrap

react-bootstrap4-modal