Question

我正在启动引导程序模态，当我单击“编辑”按钮时，它会打开引导程序模态，但是当我单击“关闭”按钮时，它不会关闭模态，任何人都可以检查我的代码，并帮我做什么。问题在里面吗？在这里我添加了我的代码，任何人都可以告诉我为什么关闭模式对此不起作用，在关闭按钮上它调用theme/assets的{{1}}方法，谢谢您的帮助。

handleClose()

Answer 1

您正在使用props数据显示/隐藏Modal，但是您正在handleClose上管理状态，因此应仅使用this.state.show而不是this.props.show来更改代码，如下所示。

Answer 2

尝试进行以下更改：此处的更改是：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 3

看到您在handleShow中传递this.state.show == true。

因此，现在您需要在模态关闭时使this.state.show == false。

为此，请在CallCRUD组件中执行一项功能：-

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

现在，将此函数的属性传递给示例组件，如下所示：

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

接下来，在handleClose函数下的Example组件中编写以下代码：

this.props.handleClose();

模型打开有效，但关闭功能在React JS中不起作用

3 个答案: