我在我的组件中使用 react bootstrap modal，但它没有通过另一个组件中的 onClick 事件调用打开

Question

    I'm using react bootstrap modal in my component, but it does not open by onClick event call in another component. how to resolve this problem?

    this is my code

        import React, { Component } from 'react';
        import classes from '../../Custom.css';
        import {Button} from 'reactstrap';
        //import ModalCart from '../../ModalCart';
        import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
        //import 'react-bootstrap';
        class Navi extends Component {`enter code here`
          constructor(props) {
            super(props);
            this.state = {
              modal: false
            };
            this.toggle = this.toggle.bind(this);
          }
          toggle() {
            this.setState({
              modal: !this.state.modal
            });
          }
            render() {
                return (
                    <header>
                  <div className="navbar fixed-top navbar-dark bg-primary box-shadow">
                    <div className="container d-flex justify-content-between">
                        <a href="" className="navbar-brand d-flex align-items-center">
                        <strong><i className="fas fa-tags"></i> Products</strong>
                       </a>
                      <Button color="danger" onClick={this.toggle} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span className="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target="#exampleModal">
                          <i className="fas fa-shopping-cart"></i>
                          <span className={classes.counter}>
                            Bag : {this.props.noItems} </span>
                            <span className={classes.counter}>
                           SUBTOTAL : <span>&#36;</span> {this.props.total.toFixed(2)}
                          </span>
                        </span>
                        {this.props.buttonLabel}</Button>
                    </div>
                  </div>
                </header>
                );
            }
        }
        export default Navi;




    this is second component where to call toggle button and my modal exit there-----

   import React, { Component } from 'react';
import ShoppingCart from './ShoppingCart';
import classes from '../src/Custom.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import Aux from '../src/Aux';


class ModalCart extends Component {
    constructor(props) {
        super(props);
        this.state = {
          modal: false
        };

        this.toggle = this.toggle.bind(this);
      }

      toggle() {
        this.setState({
          modal: !this.state.modal
        });
      }
    render() {
        console.log(this.props.cart);
        return (

            <div> 
              <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
              <ModalHeader toggle={this.toggle} className={classes.modalheader}>Shopping Cart</ModalHeader>
              <ModalBody className="">
              <div className="modal-body">
                             <ShoppingCart
                                cart={this.props.cart}
                                onRemove={this.props.onRemove}
                               checkOut={this.props.checkOut}
                               tot={this.props.total}
                               />
                      </div>
              </ModalBody>
              <ModalFooter>
                <Button color="secondary" onClick={this.toggle}>Cancel</Button>
              </ModalFooter>
            </Modal>
          </div>





        );
    }
}

export default ModalCart;


Both of the component are displayed here plz check and help it out why it does not working thanks .......it is a mind stuck procedure form help me out from this condition,

我在我的组件中使用了 react bootstrap modal，但它没有通过另一个组件中的 onClick 事件调用打开......任何人都知道它吗请提及下摆/她他们帮助我解决这个问题

如果我做错了，我将所有两个组件及其代码都放在这里，突出显示它解决了这个问题

Answer 1

看起来您没有导入 NavbarToggler。

import { NavbarToggler} from reactstrap;

在 render() 中，它看起来像这样

<NavbarToggler onClick={this.toggle} />