如何在 React 中获取字段的先前值？我想使用它来显示用户在单击字段上的"编辑"时以前的输入

Question

我希望下面代码块中的第一个Textfield显示前一个值的输入，以便用户单击编辑，看到前一个值，然后可以从那里进行编辑。

任何帮助都是感激的!

第一部分介绍初始状态

const [tasks, setTasks] = useState([
{
id: 1,
text: "Doctor's appointment",
priority: true,
isComplete: false
},
{
id: 2,
text: "Birthday Dinner",
priority: true,
isComplete: false
}]);

编辑功能在

下面

const [taskEditing, setTaskEditing] = useState(null);
const [editingText, setEditingText] = useState("");


function editTask(id) {
const updatedTasksEdit = [...tasks].map((task) => {
if (task.id === id) {
task.text = editingText;
}
return task;
});
setTasks(updatedTasksEdit);
setTaskEditing(null);
setEditingText("");}

我试图编辑任务的任务卡的UI在

下面

<Card
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 }}
required
variant="outlined"
onChange={(e) => setEditingText(e.target.value)}
defaultValue='hello'
placeholder='This is a placeholder'
value={editingText}
/>
}
/>
) : (
<CardHeader
action={
<IconButton aria-label="Edit">
<EditIcon onClick={() => setTaskEditing(task.id)} />
</IconButton>
}
title={task.text}
/>
)}

Answer 1

要获得旧值的副本，可以使用ref.

const [editingText, setEditingText] = useState("")
const oldText = useRef("")

const onClick = () => {
oldText.current = editingText
// now the oldText.current holds the old value
setEditingText("Hello World")
}
...

使用state和ref的区别在于ref不触发渲染，所以可以帮助你减少不必要的渲染。然而，在你的情况下，也许你也可以尝试使用状态。

但是你明白了，如果你需要一个先前的值，你需要创建另一个变量。你可以认为钩子状态只是一个变量。因此，请使用您的一般编程逻辑感。