[英]React-Modal navigates on close
Using React
, React-Router
and React-Modal
. 使用
React
, React-Router
和React-Modal
。
Provided I have these routes: 只要我有以下路线:
ReactDOM.render((
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={ App }>
<IndexRoute component={ Home } />
<Route path="/UnitPlants" component={ UnitPlants } />
<Redirect from="*" to="/" />
</Route>
</Router>
</Provider>
), main);
I am opening a modal inside of the UnitPlants
component 我在
UnitPlants
组件内部打开一个模式
render: function () {
return (
<div>
<div className="row col-xs-12 padding-bottom-10">
<button className="pull-right btn btn-success"
onClick={this.openModal}>
<span className="glyphicon glyphicon-plus" aria-hidden="true"></span> Open my modal
</button>
</div>
<div className="row col-xs-12">
//some table here... nothing important
<Modal
isOpen={this.state.modalIsOpen}
shouldCloseOnOverlayClick={false}
style={modalStyle}>
<UnitPlantDialog closeModal={this.closeModal} unitPlant={this.state.unitPlant}/>
</Modal>
</div>
</div>
);
}
My open and close look like this: 我的打开和关闭外观如下:
openModal: function () {
this.setState({ modalIsOpen: true });
},
closeModal: function () {
this.setState({ modalIsOpen: false });
}
Yet when I close my modal, it navigates to http://localhost:3000/UnitPlants?plantName=&productType=1&createdAt=2016-06-02&expiresAt=
for some reason and I cannot seem to figure out why exactly. 然而,当我关闭模态时,由于某种原因,它导航到
http://localhost:3000/UnitPlants?plantName=&productType=1&createdAt=2016-06-02&expiresAt=
,我似乎无法弄清楚为什么。
How can I stop my modal from navigating to a route having ?.....
and thus not re-rendering my entire application? 如何阻止模态导航到具有
?.....
的路线,从而不重新呈现整个应用程序?
I forgot to handle the default behaviour of the button in the modal. 我忘记处理模式中按钮的默认行为。
closeModal: function (e) {
e.preventDefault();
this.props.closeModal();
}
the e.preventDefault()
fixed the issue e.preventDefault()
解决了该问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.