ReactJs：需要將卡換成另一張卡 onClick

Question

這是我的目標：登錄卡中有一個“新用戶”按鈕，點擊它，卡將變為注冊。 登錄卡將消失。 我在 material-UI 中所做的一切。

我在代碼和代碼中的代碼

當我單擊按鈕時，它顯示錯誤。 如果我在卡片外面制作這個按鈕，我可以使用 if-else 條件來顯示所需的卡片。 但我應該將按鈕保留在登錄表單中。

當我按下 Newuser 按鈕時，它是說使用 children 數組。 我該如何解決？ 提前謝謝

Answer 1

您可以將 function 作為道具從您的父母傳遞給您的孩子，這將設置狀態為 boolean 以更改顯示的卡片。 這樣，按鈕就會留在您的孩子身上。

Answer 2

由於您有兩張卡片並且您想在它們之間切換 - 您需要有人來處理要顯示的卡片（它可能是它們的容器）。

您可以使用 state 來控制要顯示的卡，並基於 state 在它們之間切換：

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

在登錄卡內 - 當您點擊“注冊”按鈕時，只需調用handleRegister function。

您的登錄卡需要獲取handleRegister function 以便在按下內部按鈕時調用它：

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

您需要根據isLogin變量的值來決定顯示哪個元素（登錄名或寄存器）：

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