1

使用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=由于某种原因它导航到我似乎无法弄清楚究竟是为什么。

如何阻止我的模态导航到具有?.....并因此不重新呈现我的整个应用程序的路线？

4

1 回答 1

2

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

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

解决了e.preventDefault()这个问题

于 2016-06-02T13:15:30.647 回答