Question

我有一个表单，当用户点击Login按钮时，我想加载一个新组件，并禁用当前组件。我读到了react-router的内容，但看起来可以将它们用于导航。

这是我的代码。

class App extends Component {
  render() {
    return (

      <div className="App">
        <HeaderComponent />      
        <header className="App-header">
            <LoginComponent/> 
        </header>
      </div>
    );
  }

当用户点击Login button时，将调用LoginComponent.js中的此方法。

  handleSubmit = event => {
    event.preventDefault();
    console.log("Login");
  }

现在，我可以成功打印Log消息，但是现在我不知道如何加载其他组件。

Answer 1

如果您不希望它出现在单独的页面上，则可以在渲染器中使用条件控件，并更改提交状态。

示例：

class App extends Component {
  state = {
    componentShown: false    
   }
  render() {
    return (

      <div className="App">
        <HeaderComponent />      
        <header className="App-header">

           {this.state.componentShown ? <ComponentToRender /> : 
            <LoginComponent/> }    
        </header>
      </div>
    );
  }

然后在您提交时更改状态。

handleSubmit = event => {
    event.preventDefault();
    this.setState({ componentShown: true })
  }

如何在按钮单击时加载新组件

1 个答案: