如何在 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
      )
    );
  };

编辑/更新

我只想编辑选项卡的名称以及嵌套元素名称的名称。

代码沙箱我添加了删除功能，现在只想编辑每个选项卡内的选项卡名称和元素名称

编辑/更新

如何更新选项卡内特定元素的名称

Answer 1

创建 json 如下：

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

将其分配给 hooks 中的状态：

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

onClick 传递密钥如下：

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

在handle中单击更新选项卡

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">
...

这是工作示例。这里我采用了双击更新和单击选择的方式，大家可以根据需要进行相应的更新。