引导 3 模态在反应关闭按钮

Question

我在 react 项目中使用 bootstrap 3。在我的项目中，我创建了一个显示模态div的组件。我将在不同的父组件中使用此组件。模态在延时后显示。模态显示良好，但不会消除。关闭按钮也不起作用。

父组件

import React, { Component } from 'react';

import Timer from './timer';

class Parent extends Component {

    render() {

        return (

            <div>

                <Timer />

            </div>

        ); }

    }

export default Parent;

子组件

import React, { Component } from 'react';

class Timer extends Component {

    constructor(props){

        super(props);

        this.state = {

            fin: false

        }

    }

    componentDidMount(){

        this.myInterval = setInterval(() => {

            this.setState({fin: true})

        }, 10000);

    } 

    render() {

        const {fin} = this.state;

        if(fin){

            return (

                <div className="modal show">

        <div className="modal-dialog modal-dialog-centered" role="document">

          <div className="modal-content">

            <div className="modal-header">

              <h5 className="modal-title" id="exampleModalLongTitle">Modal 

              title</h5>

              <button type="button" name="test" className="close" onClick={this.handleClose} data-dismiss="modal" 

              aria-label="Close">

              <span aria-hidden="true">&times;</span>

              </button>

            </div>

            <div className="modal-body">

              ...

            </div>

            <div className="modal-footer">

              <button type="button" className="btn btn-secondary" data- 

               dismiss="modal">Close</button>

              <button type="button" className="btn btn-primary">Save 

              changes</button>

            </div>

          </div>

        </div>

      </div>

            )

        } else {

        return (

              <div>

                  Child counting...

              </div>

         )

        }

    }

}

export default Timer;

Answer 1

您必须在子组件的 render（） 上方添加一个用于处理关闭模型的函数。handleClose()=>{ &nbsp;&nbsp;&nbsp;this.setState({fin:false}); }