Как скрыть текстовое поле ввода для входа в систему после входа пользователя?

Что я хочу знать, так это то, как я могу скрыть ввод текстовых полей входа в систему после того, как пользователь вошел в систему. Это единственное веб-приложение, поэтому у меня нет никаких маршрутов или чего-то в этом роде.

Мой логин:

const login = () => {
        Axios.post("http://localhost:3001/login", {
            username: username,
            password: password,
        }).then((response) => {
            if (response.data.message) {
                setLoginStatus(response.data.message);
            } else {
                setLoginStatus(response.data[0].username);
            }
        });
    };
<div className="gpt3__navbar-sign">
                <p>
                    <div className="formField">
                        <input
                            type="text"
                            className="loginInputField"
                            placeholder="E-Mail"
                            onChange={(e) => {
                                setUsername(e.target.value);
                            }}
                        />
                        <input
                            type={passwordShown ? "text" : "password"}
                            className="loginInputField"
                            placeholder="Password"
                            onChange={(e) => {
                                setPassword(e.target.value);
                            }}
                        />
                    </div>
                </p>
                <div className="gpt3__navbar-sign">
                    {!loginStatus ? (
                        <button onClick={login} className="formFieldButton">Einloggen</button>
                    ) : (
                        <button onClick={logoutUser} color="inherit">
                            Logout
                        </button>
                    )}
                </div>
            </div>

заранее спасибо

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать то же самое, что и для кнопки:

<div className="gpt3__navbar-sign">
                <p>
                    <div className="formField">
                       {!loginStatus && 
                          <>
                            <input
                            type="text"
                            className="loginInputField"
                            placeholder="E-Mail"
                            onChange={(e) => {
                                setUsername(e.target.value);
                            }}
                          /> 
                          <input
                            type={passwordShown ? "text" : "password"}
                            className="loginInputField"
                            placeholder="Password"
                            onChange={(e) => {
                                setPassword(e.target.value);
                            }}
                          />
                       </>}
                    </div>
                </p>
                <div className="gpt3__navbar-sign">
                    {!loginStatus ? (
                        <button onClick={login} className="formFieldButton">Einloggen</button>
                    ) : (
                        <button onClick={logoutUser} color="inherit">
                            Logout
                        </button>
                    )}
                </div>
            </div>

Другие вопросы по теме