Блог

Главная - Вопросы по программированию - Проблема с условным отображением компонентов / элементов в React и setState

Проблема с условным отображением компонентов / элементов в React и setState

#javascript #reactjs #dom #react-router #conditional-statements

#javascript #reactjs #dom #react-маршрутизатор #условные операторы

Вопрос:

У меня есть форма входа / регистрации react, в которой при переходе на страницу, на которой вы находитесь в разделе регистрации, мне нужно отобразить раздел входа при нажатии «Войти» и отображать продукты так, как это происходит при нажатии «Начать» из любого из компонентов регистрации или входа в систему, при этом раздел регистрации исчезает. Регистрация и вход в систему должны быть практически одинаковыми, просто разные входные данные и отображаться в одном пространстве.

Моя проблема в том, что у меня есть часть «Регистрация и начало работы», которая отображается и функционирует правильно, но, похоже, не могу понять, как правильно установить состояние, когда пользователь нажимает кнопку входа и переключает ее на отображение этого компонента вместо регистрации.

Я полагаю, что моя часть моей проблемы заключается в этом утверждении :

 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 — это моя основная структура приложения, которая использует большую ее часть, а регистрация, логин и карточки являются моими другими компонентами.

Компонент регистрации

 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:

  1. Вы могли бы добавить тип аутентификации в качестве state в вашем компоненте React.
  2. В зависимости от того, на что нажал пользователь, обновите состояние React.
  3. Знайте, что компонент соответствует состоянию.
 this.state = {
 authType: "signup"
}

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

или лучше,

вы могли бы использовать разные маршруты для входа и регистрации с помощью react-router . И показывать их по-другому.

Комментарии:

1. Разве это не то, что я делаю с LoginStatus? Как бы я устанавливал состояние только тогда, когда они переходят на вкладку входа в систему?

2. Передайте свой компонент / вкладки prop, который при нажатии обновляет родительский компонент.