引导 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()=>{
   this.setState({fin:false});
}