Javascript 编辑模态内部的状态

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

这是一张更好理解的图片。 [1] :

我希望标题和注释位于输入框内，允许用户编辑它们。下面是我的模态组件，我在下面写的函数工作得很好，但它不是“编辑”原始标题或注释，它基本上只是制作一个新的标题或注释

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

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>
  );
}

import React，{useState}来自“React”；
导出默认函数模式({
标题
注意，
setCompletedNote，
全注:，
setIsModalShown，
…道具
}) {
常量[newTitle，setNewTitle]=useState（“”）；
const[newNote，setNewNote]=useState（“”）；
函数editNoteCompleted（id、newTitle、newNote、e）{
setCompletedNote（（prevState）=>
prevState.map（（n）=>{
如果（n.id==id）{
返回{…n，标题：newTitle，注释：newNote}；
}
返回n；
})
);
setIsModalShown（假）；
}
返回(
编辑注：

setNewTitle（e.target.value）}
/>


setNewNote（e.target.value）}
/>
editNoteCompleted（FullNote.id，newTitle，newNote）}
>
好啊
取消
);
}

如果选定组件的标题和注释作为道具传递。然后您只需要将状态的初始值设置为

标题

和

注释

属性

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

---

您好，Shyam，这种方法唯一的问题是，如果您编辑了一个注释标题，然后尝试返回并编辑一个已经存在的注释。。初始标题将显示为您编辑的第一个注释标题。这有意义吗？任何帮助都将不胜感激。这就是为什么我在回答中提到的

所选组件

。但看起来你有一个共同的模式。如果是这种情况，那么您需要为所选注释设置单独的状态。并将所选注释标题和注释传递给模式。因此，流程如下->单击注释的编辑->将此注释设置为所选注释->打开模式。另一种方法是将模式移动到你的笔记组件中，这样每个笔记都有自己的模式，而不会意识到另一个笔记。太棒了。这很有道理。。我看看我能在这里做些什么。我很感激。注意确定为什么这不起作用const editNote=（FullNote）=>{setSelectedNote（（prevState）=>（{…prevState，title:FullNote.title，note:FullNote.note}））setIsModalShown（true）；}；之后，我将selectedNote传递给我的model，并使newTitle的初始状态和newNote的所选注释如下：const[newTitle，setNewTitle]=useState（selectedNote.title）；const[newNote，setNewNote]=useState（selectedNote.note）；