无法在React和setState

如何解决无法在React和setState

我有一个反应性的登录/注册表单，当您进入页面时，位于登录部分，我需要在单击“登录”时显示登录部分，并像单击“入门”时一样显示产品。从注册或登录组件中删除，注册部分消失。注册和登录实际上应该是相同的，只是输入不同，并在同一空间中显示。

我的问题是我的注册和入门部分显示并正常运行，但似乎无法弄清楚如何正确设置用户单击登录按钮并切换为显示该组件而不是注册时的状态

我相信我的问题所在就是这份声明：

render() {
    const { requestedPostsThatWeGotFromGecko } = this.state;
    const { loginStatus } = this.state;
    return (
       <div className="gecko">
        {requestedPostsThatWeGotFromGecko ? (
          <Cards />
        ) : loginStatus ? (
            <Login signup={() => this.clickMe()} />
        ) : (
          <SignUp login={() => this.clickMe()} />
        )
        }
      </div> 
    );
  }

Gecko是我的主要应用程序结构，其中的大部分内容都来自Gecko，注册，登录和卡片是我的其他组件。

注册组件

import React from 'react';
import Login from '../LogIn';
//import CoolTabs from 'react-cool-tabs';



export default class SignUp extends React.Component {

    render() {
        const onClick = () => {
            this.props.login();
            console.log('rich');
        }
        return (
            <div className='sign-up'>
                <table className='sign-up-form'>
                    <tbody>
                    <div class="gecko-signup__tabs"><button id="gecko-signup" data-selected="yes">Sign Up</button>
                    <button id="gecko-login" data-selected=""onClick={this.setState.loginClose}>Log In</button></div>
            ...
                            <td colSpan="2"><input id="getStarted" type="submit" value="Get Started" onClick={onClick}/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }
}

登录组件

import React from 'react';
import SignUp from '../SignUp';


export default class Login extends React.Component {

    render() {
        const onClick = () => {
            this.props.signup();
            console.log('rich');
        }
        return (
             <div className='login'>
                 <div className="login" ref={el => (this.div = el)}></div>
                 <table className='sign-up-form'>
                    <tbody>
                        <div class="gecko-signup__tabs">    
                            <input id="gecko-signup" value="Sign Up" onClick={SignUp} />
                            <input id="gecko-login" value="Log In" onClick="" />
                        </div>
                        <tr>
                            <td>
                                <p id="signUpFree">Welcome Back</p>
                            </td>
                        </tr>
                        <div id="inputs-section">
                        
                        <div class="field-wrap">
                            <label>Email Address<span class="req">*</span></label>
                                <input type="email"required autocomplete="off"/>
                        </div>
                        <div class="field-wrap">
                               <label>Password<span class="req">*</span></label>
                                    <input type="password"required autocomplete="off"/>
                        </div>
                        <tr>
                            <td colSpan="2"><input id="getStarted" type="submit" value="Log Me In" onClick={onClick}/></td>
                        </tr>
                        </div>
                </tbody>
            </table>
        </div>
    );  
    }
}

是否有一种简单的方法可以根据默认值在这三个值之间交替显示，或者按下了哪个按钮？我看过react-router-dom，但发现自己到目前为止已经撕裂了很多功能。

解决方法

1. 您可以在React组件中将身份验证类型添加为state。
2. 根据用户单击的内容，更新React状态。
3. 知道组件对应于状态。

this.state = {
 authType: "signup"
}

render() {
  if (authType === "signup") return <Signup />
  if (authType === "login") return <Login />
}

或更好，

您可以使用不同的路由来使用react-router登录和注册。 并以不同的方式显示它们。