可能是因为代码中使用了value
属性而不是defaultValue
属性。在React中,将value
设置为非空值会消除输入框的默认值,导致编辑待办事项时出现问题。将value
设置为defaultValue
即可解决此问题。
示例代码:
import React, { useState } from "react";
function TodoItem({ todo, onEdit }) {
const [text, setText] = useState(todo);
const handleEdit = () => {
onEdit(text);
};
return (
setText(e.target.value)} />
);
}
在上述代码中,使用了defaultValue
属性来设置输入框的默认值,并且在编辑时通过onChange
事件更新了输入框的文本。在编辑完成后,调用onEdit
函数将文本传回到父组件,完成待办事项的更新。
上一篇:编辑待办事项清单