Question

我正在尝试更改为名为Party的组件的呈现表单是从组件Events提交的。

这是Events组件的渲染方法：

render() {
    return (
        <Router>
            <div>
                <form onSubmit={this.handleSubmit}>
                    <h3> Create Event </h3>
                    {this.createUser()}
                    <div>
                        <input type="button" value="add more" onClick={this.addClick.bind(this)} />
                        <input type="submit" value="Submit" />
                    </div>
                </form>

                <div>
                    <Link to="/party">Party</Link>
                    <Route path="/party" component={Party} />
                </div>
            </div>
        </Router>
    );
}

和Party组件的渲染很简单：

class Party extends Component {
    render() {
        return <h1> PARTY </h1>;
    }
}

页面已更改为/party，但表单仍保留在页面上且不会消失。我刚刚开始React，所以我是一个完整的菜鸟。谢谢你的帮助！

Answer 1

表单始终存在，因为您始终呈现它。要在特定路径中显示表单，并在另一个路径中显示Party组件，您应该使用react-router Switch组件

呈现与该位置匹配的第一个孩子<Route>或<Redirect>。

可能的情况：

<Router>
    <div>
        <div>
            <Link to="/">Form</Link>
            <Link to="/party">Party</Link>
        </div>
        <Switch>
            <Route exact path="/" component={Form} />
            <Route path="/party" component={Party} />
        </Switch>
    </div>
</Router>

Form组件包含<form></form>的位置，仅在网址为/时显示。

我认为这个react-seed项目对您有所帮助。

使用路由器更改表单提交上的网页

1 个答案: