所以句柄更改方法有效，但總是忘記我的字串的最后一個字符（當我輸入“test”時它會保存“tes”），即使我正在測驗以查看函式中是否有錯誤值，只選擇如果還剩一個字符，則出錯。任何建議都會有所幫助。
const [ tools, setTools ] = useState({
name: props.values.name || '',
description: props.values.description || '',
notes: props.values.notes || '',
downloadLink: props.values.downloadLink
});
const handleChange = (e) => {
const { name, value } = e.target;
setTools((prevState) => ({
...prevState,
[name]: value
}));
props.setEditValues(tools);
if (!tools.name || !tools.description || !tools.downloadLink) {
props.setError(true);
}
else {
props.setError(false);
}
};
<TextField
error={props.error}
fullWidth
label='Name'
name='name'
onChange={handleChange}
value={tools.name}
variant='outlined'
/>
uj5u.com熱心網友回復：
問題是，tools是不是最新的范圍handleChange之后您呼叫函式setState。
呼叫 setState確實會更新tools組件狀態中的值，但需要重新創建該handleChange函式，以便它具有更新后的值。
解決問題的一種方法是使用useEffect鉤子：
const [tools, setTools] = useState({
name: props.values.name || '',
description: props.values.description || '',
notes: props.values.notes || '',
downloadLink: props.values.downloadLink
});
const handleChange = (e) => {
const { name, value } = e.target;
setTools((prevState) => ({
...prevState,
[name]: value
}));
};
useEffect(() => {
props.setEditValues(tools);
if (!tools.name || !tools.description || !tools.downloadLink) {
props.setError(true);
}
else {
props.setError(false);
}
}, [tools, props.setEditValues, props.setError]);
<TextField
error={props.error}
fullWidth
label='Name'
name='name'
onChange={handleChange}
value={tools.name}
variant='outlined'
/>
另一種方法是tools在handleChange函式作用域中創建更新的值，并將其用于設定組件狀態和函式內部。
該函式看起來像這樣，您不需要useEffect：
const handleChange = (e) => {
const { name, value } = e.target;
const nextTools = { ...tools, [name]: value };
setTools(nextTools);
props.setEditValues(nextTools);
if (!nextTools.name || !nextTools.description || !nextTools.downloadLink) {
props.setError(true);
}
else {
props.setError(false);
}
};
uj5u.com熱心網友回復：
使用 onKeyUp 插入 onChange：
<TextField
error={props.error}
fullWidth
label='Name'
name='name'
onKeyUp={handleChange}
value={tools.name}
variant='outlined'
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370899.html