我希望下面代碼塊中的第一個Textfield能夠顯示之前的輸入值，以便用戶點擊編輯，看到之前的值，然后可以從那里進行編輯。
歡迎任何幫助！
這第一部分包括初始狀態
const [tasks, setTasks] = useState( [
{
id: 1,
text: "醫生的預約"。
priority: true。
isComplete: false。
},
{
id: 2,
text: "生日晚餐"。
priority: true,
isComplete: false。
}]);
下面是編輯函式
const [taskEditing, setTaskEditing] = useState(null) 。
const [editingText, setEditingText] = useState(""/span>)。
function editTask（id） {
const updatedTasksEdit = [...tasks].map((task) => //span> {
if (task.id ==id) {
task.text = editingText。
}
return task。
});
setTasks(upedTasksEdit)。
setTaskEditing(null)。
setEditingText(""); }
我試圖編輯任務的任務卡的用戶界面如下
<卡
style={{
backgroundColor: `${
task.isComplete ? "lightgreen" : task.priority ? "lightcyan" : ""
}`
}}
>
{taskEditing === task.id ? (
<CardHeader ?
action={
<IconButton aria-label="SaveEdits" >
<SaveIcon onClick={() => editTask(task.id)} /> />
</IconButton>。
}
title={
<TextField
style={{ width: 410 }}。
必須的
變數="概述"
onChange={(e) => setEditingText(e.target.value)}。
defaultValue='hello
placeholder='這是一個占位符'。
value={editingText}。
/>
}
/>
) : (
<CardHeader>
action={
<IconButton aria-label="Edit"/span>>
<EditIcon onClick={() => setTaskEditing(task.id)} /> />
</IconButton>/span>。
}
title={任務.文本}/task.text
/>
)}
CodePudding
為了有一個舊值的副本，你可以使用一個ref.
。 const [editingText, setEditingText] = useState("")
const oldText = useRef("")
const onClick = (/span>) => {
oldText.current = editingText
// now the oldText.current持有舊值。
setEditingText("Hello World"/span>)
}
...
使用狀態與參考的區別在于，參考不會觸發渲染，因此可以幫助你減少不必要的渲染。然而在你的案例中，也許你也可以嘗試使用一個狀態。
但是你會明白的，如果你需要一個先前的值，你需要創建另一個變數。你可以認為鉤子的狀態只是一個變數。因此，那就使用你的一般編程邏輯意識吧。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/308882.html
標籤：
上一篇：Azure資料工廠sftp
下一篇：表單提交后顯示祝酒詞