javascript - 如何在 React 中编辑特定对象

Question

我在 react 中从我的 JSON 数据创建了一个 UI，我在其中创建选项卡并在每个选项卡中嵌套了一些元素，这工作正常。
我为每个选项卡都有一个删除按钮，因此当我单击删除时，它正在删除该特定选项卡。
我还在我的选项卡中嵌套元素，所以现在我试图在单击相应按钮时删除这些元素，但出现错误。
要创建新标签，我正在这样做:

      const addNewTab = () => {
        const name = window.prompt("Enter Name");
        if (name) {
          setData((data) => [...data, new Data(id, name)]);
        }
      };

并在该选项卡内创建新元素:

      const Create_element = () => {
        const data_name = window.prompt("Enter Data Name");;
        if (data_name ) {
          setData((data) =>
            data.map((el, i) =>
              i === active_menu
                ? {
                    ...el,
                    myData: [...el.myData, { data_name,  }]
                  }
                : el
            )
          );
        }
      };

要删除选项卡:

    setData((data) => data.filter((_, i) => i !== index));

  const deleteData = (index) => {
    console.log("delete", index);
    setData((data) =>
      data.map((dataItem, dataIndex) =>
        dataIndex === active_menu
          ? {
              ...data[dataIndex],
              myData: data[dataIndex].myData.filter((_, i) => index !== i)
            }
          : dataItem
      )
    );
  };

编辑/更新
我只想编辑选项卡的名称以及嵌套元素名称的名称。
Code Sandbox我添加了删除功能，现在只想在每个选项卡内编辑选项卡名称和元素名称
编辑/更新
如何更新选项卡内特定元素的名称

Answer 1

像这样创建json:

const tabJSON = {"home":"<element>","contact":"<element", ...}

将其分配给钩子(Hook)中的状态:

const [tab, setTab] = useState(tabJSON);

onClick 密码，如:

onClick={()=>handleClick(key)}

在 handleClick 更新选项卡中

handleClick=param=>{
   const updatedTab = {...tab};
   if(param in tab){
     delete updatedTab[param]; //remove updated tab and its content
 }
    setTab(updatedTab); 
}

更新选项卡:

const handlEditTab=(index,tabName)=>{
    const newTabName = prompt(`Rename ${tabName}`);
    /**
     * here any layover form can be used or any condition also can be put for tab name
     */
    if(tabName){
      const newTabs = [...data];
      const indexOfElement = newTabs.findIndex(obj=>obj.id===index);
      newTabs[indexOfElement].name= newTabName;
      setData(newTabs)
    }
  }

在 JSX 中调用这个函数，如下所示:

...
<div onDoubleClick={()=>handlEditTab(li.id,li.name)} className="dashboard_name col-10 col-sm-10 col-md-9 col-lg-10 col-xl-10">
...

here是工作示例。
这里我使用了双击更新和单击选择，您可以根据需要进行相应的更新。