模型开放是工作，但关闭功能不起作用在反应JS

Question

我在引导模式的OpenUP工作，当我点击编辑按钮，打开它的引导模式，但是当我在关闭按钮单击它不会关闭模式，任何人都可以请我的代码，并帮助我有什么问题，它？在这里，我增加了我的代码，任何人都可以告诉我为什么关闭模式是不是为工作，在关闭按钮调用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')  
);

Answer 1

试着做这个变化：这里的变化是：this.handleClose，<Example showModal={this.state.show} popup_id={this.state.popup_index} handleClose={this.handleClose}/>

class CallCRUD extends React.Component {

  constructor(props) {
    super(props);
    this.deleteTask = this.deleteTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.handleClose = this.handleClose.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});    
  }
  handleClose(){
    this.setState({show: false});
  }

  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 showModal={this.state.show} popup_id={this.state.popup_index}  handleClose={this.handleClose}/>
      </section>
    );
  }

}

然后到实例组件这里的主要变化是：<Modal show={this.props.showModal} onHide={this.props.handleClose} >，<Button onClick={this.props.handleClose}>Close</Button>

class Example extends React.Component {


  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.showModal} onHide={this.props.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.props.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

Answer 2

您正在使用的道具的数据显示/隐藏你的模态，但你在handleClose管理状态，以便shoult改用this.state.show的this.props.show只是改变如下面的代码。

Answer 3

看你是路过this.state.show == true在handleShow。

所以，现在你需要做模态的亲密this.state.show ==假。

要做到这一点，让一个函数在CallCRUD成分： -

handleModal = () => {
  this.setState({
    show:false  
  }) 
}

现在，通过这个功能，在属性像这个例子组件：

<Example handleShow = {this.state.show} handleClose={()=>{this.handleModal()}} popup_id = {this.state.popup_index}  />

接着，在handleClose作用下例组分写：

this.props.handleClose();