我正在嘗試創建一個簡單的 React 表單，單擊按鈕時，它將在受控輸入元素中顯示輸入的輸入值。具體來說，我不希望有與 React 檔案中相同的解決方案（不斷更新輸入更改時顯示的值），而我只希望它在用戶點擊提交按鈕后更新顯示的段落文本。我可以用這個當前的解決方案來做到這一點（根據處理函式中設定的提交狀態有條件地呈現）：
import { useState } from 'react';
export default function App() {
const [text, setText] = useState('');
const [submitted, setSubmitted] = useState(false);
const handleSubmit = e => {
e.preventDefault();
setSubmitted(true);
};
const handleChange = e => {
setSubmitted(false);
setText(e.target.value);
};
return (
<>
<form onSubmit={e => handleSubmit(e)}>
<label>Text: </label>
<input type="text" value={text} onChange={e => handleChange(e)} />
<button type="submit" onClick={handleSubmit}>
Show
</button>
{submitted && <p>{text}</p>}
</form>
</>
);
}
但我猜想有更好的方法來做到這一點。
uj5u.com熱心網友回復：
如果您希望能夠多次提交并在再次提交之前保留最后一次，請使用：
import { useState } from 'react';
export default function App() {
const [text, setText] = useState('');
const [displayText, setDisplayText] = useState('');
const handleSubmit = e => {
e.preventDefault();
setDisplayText(text);
};
const handleChange = e => {
setSubmitted(false);
setText(e.target.value);
};
return (
<>
<form onSubmit={e => handleSubmit(e)}>
<label>Text: </label>
<input type="text" value={text} onChange={e => handleChange(e)} />
<button type="submit" onClick={handleSubmit}>
Show
</button>
{displayText && <p>{displayText}</p>}
</form>
</>
);
}
displayText && ... 是這樣段落標記在它具有要顯示的值之前不存在，但是您可以只替換該部分而不使用它，它將起作用。
uj5u.com熱心網友回復：
使用單個處理程式功能更清潔
const handleSubmit = e => {
e.preventDefault();
setSubmitted(true);
setDisplayText(document.getElementById('inputText').value);
};
return (
<>
<form onSubmit={e => handleSubmit(e)}>
<label>Text: </label>
<input type="text" id="inputText" />
<button type="submit" onClick={handleSubmit}>
Show
</button>
{submitted && <p>{text}</p>}
</form>
</>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416960.html
標籤：