Question

我有一个表单组件，我正在点击Next按钮验证该表单，一旦验证成功，我想渲染一个不同的组件。

在州内，我将“showComponent”保持为false，点击该按钮，我认为是真的。

_onButtonClick (event){
    event.preventDefault();
    this.setState({
        ...this.state,
        showComponent:  !this.state.showComponent
    })
    console.log("button clicked",this.state);
  }

按钮逻辑：

<div>
    <button onClick={(event) => this._onButtonClick(event)}>Button</button>
         {this.state.showComponent ?<AddModules /> : null}
</div>

我能够渲染那个新页面，但它在同一页面上呈现，这是我不想要的。

Answer 1

我认为{% path file, 'reference' %}提供的<Route />组件正是您所需要的。

看看example in the react-router docs。请注意他们如何设置react-router-dom。他们还有一个关于如何阻止某人进入另一页的example in the docs。

我也快速demo in CodeSandbox，它更像你正在寻找的东西。

如何在React中单击下一个按钮显示新组件

1 个答案: