我正在嘗試實作一個表單，首先您會看到 2，然后當您單擊按鈕時，您會看到其他輸入。我正在使用一個開關，根據一個值，我回傳前 2 個或其他。我試過只回傳 , 回傳帶有輸入的表單，但一切都給了我同樣的問題。在我填寫前兩個文本輸入后，當我切換到其他文本輸入時，這些輸入的前 2 個具有前 2 個輸入的值。
謝謝你的幫助。
這里有一個基本版本的代碼
function renderSwitch() {
switch (currentPhase) {
case 0:
return (
<div>
<input name='email' type='email' placeholder='Inserisci email' />
</div>
);
break;
case 1:
return (
<div>
<input
name='surname'
type='text'
placeholder='Inserisci Cognome...'
/>
</div>
);
break;
}
return (
<div
className='registerpage'
style={{ height: '100vh', backgroundColor: 'white' }}
>
<div className='formdiv'>
<form onSubmit={handleSubmit}>
{renderSwitch()}
{currentPhase < 1 && (
<button onClick={() => nextPhase()}>Next</button>
)}
{currentPhase > 0 && (
<button onClick={() => previousPhase()}>Back</button>
)}
<br />
<button type='submit'>Iscriviti</button>
</form>
</div>
</div>
);
}
uj5u.com熱心網友回復：
您應該使用狀態存盤輸入值：
const [email, setEmail] = useState('')
const [surname, setSurname] = useState('')
function renderSwitch() {
switch (currentPhase) {
case 0:
return (
<div>
<input value={email} name='email' type='email' placeholder='Inserisci email' />
</div>
);
break;
case 1:
return (
<div>
<input
value={surname}
name='surname'
type='text'
placeholder='Inserisci Cognome...'
/>
</div>
);
break;
}
}
然后在您提交資料后重置它們：
function handleSubmit(e) {
e.preventDefault()
// Handler your data...
setEmail('')
setSurname('')
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363235.html
標籤：javascript html 反应 形式 输入