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});
}