Question

我正在尝试/尝试进行复制，我正在尝试向文件添加模式按钮。我有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

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

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

但是您正在导出子组件，

export default connect()(ItemModal);

您应该导出父组件，

export default connect()(App);

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

1 个答案: