下面是處理用戶注冊和登錄到應用程式的身份驗證組件。所使用的方法是根據用戶之前是否已在應用程式中注冊或他們是新用戶來有條件地呈現 div。div 不會根據初始狀態和設定的條件而改變。在這種情況下，isSignUp狀態為假，因此用戶之前沒有注冊，因此所有欄位都應該可用于用戶輸入的資料，但這些欄位已被省略。下面是代碼
const {isSignUp, setisSignUp} = useState(false);
<form onSubmit = {handleSubmit} className = 'form'>
{isSignUp && (
<div className='auth-form-field'>
<input
name="Full Name"
type="text"
placeholder="Full Name"
className = "form-input"
onChange={handleChange}
required
/>
</div>
)}
<div className='auth-form-field'>
<input
name="Email"
type="text"
placeholder="Email"
className = "form-input"
onChange={handleChange}
required
/>
</div>
{ isSignUp && (
<div className='auth-form-field'>
<input
name="User Name"
type="text"
placeholder="User Name"
className = "form-input"
onChange={handleChange}
required
/>
</div>)
}
<div className = 'auth-form-field'>
<input
name="Password"
type="password"
placeholder="Password"
className = "form-input"
onChange={handleChange}
required
/>
</div>
{isSignUp && (
<div className = 'auth-form-field'>
<input
name="Confirm Password"
type="password"
placeholder="Confirm Password"
className = "form-input"
onChange={handleChange}
required
/>
</div>)
}
</form>
uj5u.com熱心網友回復：
你的語法在useState這里不正確
正確的語法：
const [isSignUp, setisSignUp] = useState(false);
uj5u.com熱心網友回復：
使用 useState 的正確語法是用方括號，像這樣
const [isSignup, setIsSignUp] = useState(false);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/403137.html
標籤：
上一篇：匯入組件的Jest模擬變數