React中如何获取字段的上一个值 点击编辑时展示用户过往输入

问题原因 #

你点击编辑按钮时没有将当前任务的原有内容赋值给editingText状态，且受控模式下的TextField设置defaultValue不生效，所以编辑框打开后没有显示原有内容。

具体修改步骤 #

1. 修改编辑按钮的点击逻辑
   找到EditIcon的onClick事件，修改为点击时同时给editingText赋值当前任务的原有文本：

<EditIcon onClick={() => {
  setTaskEditing(task.id)
  setEditingText(task.text)
}} />

2. 清理TextField的冗余属性
   TextField用了value属性就是受控组件，defaultValue不会生效，直接删掉这一行即可：

<TextField
  style={{ width: 410 }}
  required
  variant="outlined"
  onChange={(e) => setEditingText(e.target.value)}
  placeholder='This is a placeholder'
  value={editingText}
/>

可选优化：修改editTask函数避免直接修改原对象 #

你当前的editTask里直接修改了task对象的属性，属于对原引用对象的修改，建议调整为返回新对象避免潜在的状态更新异常：

function editTask(id) {
  const updatedTasksEdit = tasks.map((task) => {
    if (task.id === id) {
      // 返回新对象不修改原引用
      return {...task, text: editingText};
    }
    return task;
  });
  setTasks(updatedTasksEdit);
  setTaskEditing(null);
  setEditingText("");
}

内容的提问来源于stack exchange，提问作者Lloyd Rajoo