ReactJs：需要在点击时将卡片更改为另一张卡片答案

【问题标题】：ReactJs: need to change Card into another card onClickReactJs：需要在点击时将卡片更改为另一张卡片
【发布时间】：2020-08-15 22:25:27
【问题描述】：

这是我的目标：登录卡中有一个“新用户”按钮，点击它，卡将变为注册。登录卡将消失。我在 Material-UI 中所做的一切。

我的代码in codesand

当我单击按钮时，它显示错误。如果我在卡片外面制作这个按钮，我可以使用 if-else 条件来显示所需的卡片。但我应该将按钮保留在登录表单中。

当我按下 Newuser 按钮时，它表示要使用 children 数组。我该如何解决？提前谢谢

【问题讨论】：

【解决方案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 />}

【讨论】：

【解决方案2】：

您可以将一个函数从您的父母传递给您的孩子作为道具，这将 setState 一个布尔值来更改显示的卡片。这样按钮就会留在您的孩子身上。

【讨论】：