ReactJs: нужно поменять карту на другую карту на клике

Question

вот моя цель: в карточке входа есть кнопка «Newuser», и она будет нажата, карточка будет изменена на «Регистрация». Карточка входа исчезнет. Все, что я сделал в интерфейсе материалов.

мой код в кодах и

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

, пока я нажимаю кнопку Newuser, он говорит использовать массив детей. как я могу решить это? спасибо заранее

Answer 1

Поскольку у вас есть две карты, и вы хотите переключаться между ними - вам нужен кто-то, кто обработает, какую из них показать (вероятно, это будет их контейнер).

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

const [isLogin, setIsLogin] = useState(true);
const handleRegister = () => {
    setIsLogin(false);
}

А внутри карточки входа - при нажатии на кнопку «зарегистрироваться» просто вызовите функцию handleRegister.

Ваша карточка входа должна получить функцию handleRegister, чтобы вызывать ее, пока нажата кнопка внутри:

<Login user={user} setUser={setUser} handleRegister={handleRegister} />

И вам нужно решить, какой элемент показывать (логин или регистр) на основе значения переменной isLogin:

{isLogin ? <Login user={user} setUser={setUser} handleRegister={handleRegister} /> : <Register />}

Вот рабочий пример: https://codesandbox.io/s/happy-moore-8miyc?file= / src / Login. js

Answer 2

Вы можете передать функцию от вашего родителя вашему ребенку как опору, которая установит логическое значение для смены отображаемой карты. Таким образом, кнопка остается у вашего ребенка.