我正在使用bootstrap类来调用反应组件中的Modal,在Modal主体的右侧有axios调用,我想在单击关闭按钮或“X”按钮时清除Modal的右侧,以便下一个弹出右侧将再次为空,是否可能?如果是,不确定如何完成内置引导类。
triggerHandler(){
axios.post(`http://localhost:8200/playit`)
.then( response=>{
console.log(response.data)
this.setState({
value:response.data
})
})
}
render(){
let value = this.state.value
return(
<div>
<div className="modal fade bd-example-modal-lg" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog modal-lg" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Response and Trigger</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<div className="row">
<div className="col-lg-6">
{
Hello
}
</div>
<div className="col-lg-6">
{value}
<button className="btn btn-primary" onClick={()=>this.triggerHandler()}>Trigger</button>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
如上所述,当我点击“X”按钮上的关闭时收到响应后,右侧应该在关闭时变空。
onCloseModal = () => {
this.setState({value:""})
}
<button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={()=>this.onCloseModal()}>Close</button>
将onCloseModal函数添加到将值设置为空字符串的按钮。