我面臨的問題真的很煩人，當我試圖編輯我的輸入文本的默認值時，輸入欄位不會輸入我的修改，或者在輸入第一個字符后才會失去焦點，然后它將回傳到它的默認值。但請注意，這只發生在我添加onChange事件的時候。如果我去掉它，輸入就會正常作業。發生了什么
？const AddMaker=（）=> {
const [make, setMake] = useState（）。
function ConditionalTableRow(props) {
let { item, index } = props;
if ( index == editModeIndex)
return ( < TableRowWithSave item={item} index={index} /> )
else
return (< TableRowWithEdit item={item} index={index} /> )
}
function TableRowWithSave（props） {
let { item } = props;
return (
<TableRow>
<TableCell>/span>
<input type="text" defaultValue={item. make} onChange={e => setMake(e.target.value)}. />
</TableCell>。
<TableCell>/span>
< button className="palletSaveButton" onClick={handleSaveClick} > 保存</按鈕>
</TableCell>/span>
</TableRow>
)
}
return (
<TableBody> )
{
records.map((item, index) => (
< ConditionalTableRow key={index} item={item} index={index} />
))
}
</TableBody>)
);
}
uj5u.com熱心網友回復：
嘗試給輸入元素添加一個value屬性。
< input type="text"/span> value={make} defaultValue={item. make} onChange={e => setMake(e.target.value) }。/>
uj5u.com熱心網友回復：
將useState移到TableRowWithSave并使用value而不是defaultValue
function ConditionalTableRow（props） {
let { item, index } = props;
if ( index == editModeIndex)
return ( < TableRowWithSave item={item} index={index} /> )
else
return (< TableRowWithEdit item={item} index={index} /> )
}
function TableRowWithSave（props） {
let { item } = props;
const [make, setMake] = useState(item.make) 。
return (
<TableRow>
<TableCell>/span>
< input type="text" value={make} onChange={e => setMake(e. target.value）} />。
</TableCell>。
<TableCell>/span>
< button className="palletSaveButton" onClick={handleSaveClick} > 保存</按鈕>
</TableCell>/span>
</TableRow>
)
}
const AddMaker = (/span>) => {
return (
<TableBody>/span>
{
records.map((item, index) => (
< ConditionalTableRow key={index} item={item} index={index} />
))
}
</TableBody>)
);
}
編輯：另外，最好將ConditionalTableRow和TableRowWithSave移到AddMaker之外。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/321641.html
標籤：
上一篇：橫向和縱向選單