在模态中编辑状态

Question

我正在做一个小笔记应用程序。当用户写下他们的标题和笔记并点击提交时，笔记会被放在页面上。。。我希望能够编辑笔记。当单击编辑按钮时，会弹出一个模态，我希望用户的标题和注释位于模态的输入框中。

下面是一张图片，以便更好地理解。[1] ：https://i.stack.imgur.com/9cFSh.png

我希望标题和注释在输入框中，允许用户编辑它们。下面是我的模态组件，我在下面写的函数运行得很好，但它不是"；编辑"；原来的标题或注释，基本上只是制作一个新的。

你知道我如何在模态输入框中获得标题和注释，并根据需要直接修改它们吗？提前感谢！

import React, { useState } from "react";
export default function Modal({
title,
note,
setCompletedNote,
FullNote,
setIsModalShown,
...props
}) {
const [newTitle, setNewTitle] = useState("");
const [newNote, setNewNote] = useState("");
function editNoteCompleted(id, newTitle, newNote, e) {
setCompletedNote((prevState) =>
prevState.map((n) => {
if (n.id === id) {
return { ...n, title: newTitle, note: newNote }; 
}
return n; 
})
);
setIsModalShown(false);
}
return (
<div className="modal__container">
<div className="modal__note-information">
<p>Edit Note:</p>
<input
type="text"
name="newTitle"
value={newTitle}
onChange={(e) => setNewTitle(e.target.value)}
/>
<br />
<input
type="text"
value={newNote}
name="newNote"
onChange={(e) => setNewNote(e.target.value)}
/>
<div className="modal__button-container">
<button
className="modal__ok-button"
onClick={() => editNoteCompleted(FullNote.id, newTitle, newNote)}
>
Ok
</button>
<button className="modal__cancel-button">Cancel</button>
</div>
</div>
</div>
);
}

Answer 1

如果所选组件的标题和注释作为道具传递。然后，您只需要将状态的initialValue作为title和note道具。

export default function Modal({
title, 
note,
setCompletedNote,
FullNote,
setIsModalShown,
...props
}) {
const [newTitle, setNewTitle] = useState(title || ''); 
const [newNote, setNewNote] = useState(note || '');