Bootstrap 3模态反应关闭按钮

Question

我在反应项目中使用 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() 上方添加一个 function 来处理关闭 model。

handleClose()=>{
   this.setState({fin:false});
}