模型打开正在工作,但关闭函数在React JS中不工作

我正在处理引导模式打开,当我单击编辑按钮时,它会打开引导模式,但当我单击关闭按钮时,它不会关闭模式,是否有人可以检查我的代码,并帮助我解决其中的问题?在这里,我添加了我的代码,有人能告诉我为什么close modal不起作用吗,在close按钮上它调用 handleClose() 方法 Example Class 谢谢你的帮助。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Button,OverlayTrigger, Tooltip,Popover} from 'react-bootstrap';



//var Modal = require('react-bootstrap-modal') //require('react-bootstrap-modal')  
var Modal = require('react-bootstrap').Modal;  
//var Button = require('react-bootstrap').Button;  

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);

    this.state = {
      show: false,
      //popup_index : this.props.popup_index
    };
  }

  handleClose() {
      //alert('sdsd');
      this.setState({ show : false });  
      //this.props.handleShow(this.state.show);
  }

  handleShow() {
      this.setState({ show: this.props.show });
  }  

  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

    return (
      <div>

        <Modal show={this.props.handleShow} onHide={this.handleClose} >
          <Modal.Header closeButton>
            <Modal.Title>Modal heading {this.props.popup_id} </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>

            <h4>Popover in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={popover}>
                <a href="#popover">popover</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <h4>Tooltips in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={tooltip}>
                <a href="#tooltip">tooltip</a>
              </OverlayTrigger>{' '}
              here
            </p>  

            <hr />

            <h4>Overflowing text to show scroll behavior</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={this.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}


class PalladiumHub extends React.Component {


  render() {

    return (<tr>
      <td>{this.props.keyuser}</td>
      <td>{this.props.name.name}</td>
      <td><button type="button" onClick={(e) => { this.props.editTask(this.props.index) }} >Edit</button><button onClick={(e) => { this.props.deleteTask(this.props.index) }}>Delete</button></td>
    </tr>
    )
  }
}  

class CallCRUD extends React.Component {

  constructor(props) {
    super(props);
    this.deleteTask = this.deleteTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      isOpen: false,
      show : false,
      popup_index:''
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  toggleModal(index) {
      this.setState({show:true,popup_index:index});    
  }


  deleteTask(index) {
    //alert(index);
    //console.log(index);
    //return false;
    let tasks = this.state.items;

    tasks.splice(index, 1);
    this.setState({
      items: tasks
    })
  }

  editTask(index) {
    this.toggleModal(index);
    //console.log(index);
  }

  render() {
    console.log(this.state.items);
    return (
      <section>
          <table border="1"> <tr><th>ID</th><th>Name</th><th>Action</th></tr> {
            this.state.items.map((data, index) => {
              //return console.log(data.id);
              return <PalladiumHub name={data} keyuser={data.id} index={index} key={index} deleteTask={this.deleteTask} editTask={this.editTask} /> 
            })
          }
          </table>
          <Example handleShow = {this.state.show} popup_id = {this.state.popup_index}  />
      </section>
    );
  }

}

ReactDOM.render(
    <CallCRUD />, document.getElementById('root')  
);