如何在 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", ...}

将其分配给钩子中的状态：

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 是工作示例。 这里我使用了双击更新和单击选择，您可以根据需要进行相应的更新。

Answer 2

当您对项目（或子项目）进行映射时，最佳做法是为映射中的每个项目设置一个唯一键。这个键不应该是数组中的索引，因为它可能会改变（即在删除时）。使用唯一键 React 可以正确管理状态，它还可以帮助您编辑相应的项目（或子项目）。

我已将 unique_id 属性添加到您的子项 (myData)。

data1 = [
  {
    id: 1,
    name: "Maxi",
    myData: [
      {
        unique_id: "61225_wsadfig",
        data_name: "div1",
        data_title: "div1 tittle"
      },
      ... etc.
]

我建议使用像 uuid 这样的唯一 id 库来生成这些值。

然后，每当您添加新项目时，您都可以将unique_id 设置为uuid()。

const Create_element = () => {
    const data_name = window.prompt("Enter Data Name");
    const data_title = window.prompt("Enter Data Title");

    if (data_name && data_title) {
      setData((data) =>
        data.map((el, i) =>
          i === active_menu
            ? {
                ...el,
                myData: [
                  ...el.myData,
                  { data_name, data_title, unique_id: uuidv4() }
                ]
              }
            : el
        )
      );
    }
  };

最后，编辑相关元素的值：像使用 deleteData 函数一样将 editData 函数作为道具传递。

我使用<input/> 来记录用户输入的新值。使用输入确保将输入的name 属性设置为这个新的unique_id。这将使您能够将unique_id 与有问题的输入相匹配，如下所示：

  const editData = (e, index) => {
    const dataName = e.currentTarget.name;
    const newValue = e.currentTarget.value;

    setData((data) =>
      data.map((dataItem, dataIndex) => {
        return {
          ...dataItem,
          myData: dataItem.myData.map((x, i) => {
            if (x.unique_id === dataName) {
              return {
                ...x,
                data_title: newValue
              };
            }
            return x;
          })
        };
      })
    );
  };

这是working sandbox。

Answer 3

您可以像使用删除功能一样更改元素，但改用 map 函数

因此，为了重命名您的选项卡，您可以映射整个集合，如果项目具有匹配的索引，则更新它的名称，否则只返回相同的项目：

const renameTab = (index) => () => {
    const newName = window.prompt("Enter New Name");
    if (newName) {
      setData(data => data.map((dataItem, idx) => {
        if (index === idx) {
          return {
            ...dataItem,
            name: newName
          }
        }

        return d;
      }));
    }
}

这里是sandbox，可以重命名选项卡/元素和删除选项卡/元素 - 请注意“E”按钮用于启动编辑。