Question

使用React，React-Router和React-Modal。

如果我有这些路线：

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

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

我的开启和关闭看起来像这样：

openModal: function () {
    this.setState({ modalIsOpen: true });
},
closeModal: function () {
    this.setState({ modalIsOpen: false });
}

然而，当我关闭我的模态时，由于某种原因导航到http://localhost:3000/UnitPlants?plantName=&productType=1&createdAt=2016-06-02&expiresAt=，我似乎无法弄明白为什么。

如何阻止我的模态导航到?.....的路线，从而不会重新渲染整个应用程序？

Answer 1

我忘了处理模态中按钮的默认行为。

closeModal: function (e) {
        e.preventDefault();
        this.props.closeModal();
    }

e.preventDefault()解决了问题

React-Modal在关闭时导航

1 个答案: