ReactJS:点击按钮来改变页面上的组件

ReactJS: Click on a button to change component on page

本文关键字：组件 改变 按钮 ReactJS      更新时间：2023-09-26

假设我正在页面上呈现一个注册组件。我有一个按钮说提交和登录。当我点击登录按钮，我希望它取代注册组件，而不必去另一个页面。只是想知道，概念上如何实现onclick处理程序。我需要使用react路由器吗?

您可以使用三元语句有条件地呈现组件。

首先声明某种状态变量来处理组件切换:

constructor(props) {
   super(props);
   this.state = {
      login: false
   }
}

然后在按钮的点击处理程序中处理这个变量的切换:

onClick = event => {
   this.setState({login: !this.state.login})//sets it to opposite of previous value
}

然后在你的渲染中你将实现三元语句

render() {
    return(
       this.state.login ? //if login is true
          <SomeComponent
             onClick={this.onClick.bind(this)}
          />
       : //else
          <AnotherComponent
             onClick={this.onClick.bind(this)}
          />
    )
}

在这两个组件中你都必须有一个按钮:

<button onClick={this.props.onClick}>Switch Component</button>

我会使用react-router-dom Link:

import { Link } from 'react-router-dom';

和按钮看起来像这样:

<button component={Link} to="/yourpage">

使用Router Library是在组件之间导航的正确方式。由于您不想使用路由，您可以尝试这样做:

维护一个状态变量来检查用户是否登录，在父组件中，你想用另一个屏幕(如

)替换注册屏幕。
constructor(props) { /* Parent Component Constructor */
   super(props);
   this.state = {
      isLoggedIn : false
   }
}

和父组件方法中的onLoginClick将为:

onLoginClick = () => {
 this.setState({ isLoggedIn : true })
}

这个值将被设置为true，当你点击登录组件(子组件)中的登录按钮时，onLoginClick方法将作为props从父组件传递，即

<Button onClick={this.props.onLoginClick}>Login</Button>

现在在父组件的渲染函数中使用这个isLoggedIn状态变量，如下所示:

render() {
    return(
      {!this.state.isLoggedIn &&
          <LoginComponent
             onClick={this.onLoginClick.bind(this)}
          />
       }
       {this.state.isLoggedIn &&
          <SecondComponent/>
       }
    )
}
相关文章：