基于狀態渲染組件

我正在處理用戶注冊/登錄頁面。我有兩個表單，一個注冊表單和一個登錄表單，以及一些稱為 signInState 的狀態，它確定要顯示哪個用戶表單。我有兩個用于切換 signInState 的按鈕，如果 signInState 為真，我希望它顯示登錄表單，如果它為假，我想顯示注冊表單。狀態正在改變，但由于某種原因條件渲染不起作用。有人可以幫我弄清楚為什么我的 toggleSignInState 不會改變頁面上呈現的內容嗎？謝謝

這是我對 signInPage 本身的反應代碼

import React from 'react'
import SignUp from './SignUp'
import LogIn from './LogIn'


export default function SignInPage() {
    const [signInState, setSignInState] = React.useState(true);

    function toggleSignIn(event) {
        console.log(event.target.id)
        setSignInState(event.target.id);
        /*setSignInState(event.target.value);*/
    }

    return (
        <div className="signInPage">
            <div className="signInPageFormContainer">
                <p>{signInState}</p>
                {!signInState && <SignUp /> }
                {signInState && <LogIn /> }
                <div className="signUpPageToggleContainer">
                    <button onClick={toggleSignIn} id='true'>Log In</button>
                    <button onClick={toggleSignIn} id='false'>Sign Up</button>
                </div>
            </div>
        </div>
    )
}

這是注冊表單的代碼

import React from 'react'

export default function SignUp() {
    return(
            <form className="signUpForm">
                <input 
                    name="username"
                    type="text"
                    placeholder="Username"
                    className="signUpInput"
                />
                <input 
                    name="email"
                    type="text"
                    placeholder="Email"
                    className="signUpInput"
                />
                 <input 
                    name="password"
                    type="text"
                    placeholder="Password"
                    className="signUpInput"
                />
                 <input 
                    name="confirmPassword"
                    type="text"
                    placeholder="Confirm password"
                    className="signUpInput"
                />
                <div>
                    <button>Sign Up</button>
                    <button>Cancel</button>
                </div>
            </form>
    )
}

這是登錄表單的代碼

import React from "react";

export default function LogIn() {
    /*functions for log in procedure*/




    return ( 
            <form className="logInForm">
                <input 
                    placeholder="Username"
                    name="username"
                    type="text"
                    id="username"
                    className="logInFormInput"
                
                />
                <input 
                    placeholder="Password"
                    name="password"
                    type="text"
                    id="password"
                    className="logInFormInput"
                
                />
                <div className="logInFormButtonContainer">
                    <button className="logInFormButton">Log In</button>
                    <button className="logInFormButton">Cancel</button>
                </div>
            </form>

    )
}

uj5u.com熱心網友回復：

元素屬性是字串。字串'true'與布林值不同true，字串'false'與布林值不同false。兩者都是真實的'true'，'false'所以signInState總是真實的。

雖然您可以在內部執行字串比較toggleSignIn以確定將什么傳遞給狀態設定器，但在按鈕中行內呼叫狀態設定器會更容易。

<button onClick={() => { setSignInState(true); }}>Log In</button>
<button onClick={() => { setSignInState(false); }}>Sign Up</button>

uj5u.com熱心網友回復：

這里idfromevent物件將始終是布林值true，因為它們不是booleans字串，即，無論您在 DOM 屬性中作為值保留什么，在大多數情況下它都是一個字串，并且除空字串之外的任何字串""都是true......

來自CertainPerformance的答案更好且易于理解

如果您想保持代碼相同并進行如下更改應該可以

function toggleSignIn(event) {        
    setSignInState(event.target.id === "true" ? true : false);
}

標籤：javascript反应

上一篇：如何從API回應URL獲取引數？

下一篇：使用備忘錄合并成單個條件