如何在react js中创建带有add-edit和delete函数的递归组件

Question

我只想创建一个类别列表，每个列表都有一个子类别。并且应该添加、编辑和删除

作为的一个例子

- Breakfast > Egg Types > Some of name
- Lunch > Chicken > Some of name

Answer 1

我也遇到过类似的情况。只有我有意见我应该你创建一个组件，作为道具数组与项目。我建议采用以下菜单项的结构

{
id:1,
text:"All",
subItems:[{
id:67,
text:"Sub",
subItems:[{
id:98,
text:"Sub of Sub"
}]
}]
}

这是我的最后答案

import {useState} from "react";
const Menu=({propsItems}:{propsItems})=>{
const [items,setItems]=useState(propsItems);
const deleteItemHandle=(id)=>{
setItems(prevState =>prevState.filter(item=>item.id!==id) )
}
const [inputValue,setInputValue]=useState("")
const [editValue,setEditValue]=useState("")
const [isEditMode,setIsEditMode]=useState(false);
const addItemHandle=()=>{
if (inputValue.trim()){
setItems(prevState =>[...prevState,{id:Math.random(),text:inputValue,subItems:[]}] )
setInputValue("")
}
}
const editItemHandle=(id:number)=>{
if (editValue){
setItems(prevState =>prevState.map(item=>{
if (item.id===id){
return {...item,text:editValue}
}
return item
}) )
setIsEditMode(false)
setEditValue("")
}
}
const toggleEditMode=()=>setIsEditMode(true)
return (
<div>
<ul>
{items.map(item=>{
return <li key={item.id}>
<span>
{isEditMode ? <div>
<input onChange={(e:any)=>setEditValue(e.target.value)} value={editValue} type="text"/>
<button onClick={()=>editItemHandle(item.id)}  >Edit</button>
</div>:  <span onDoubleClick={toggleEditMode}>
{item.text}
</span>}
<span onClick={()=>deleteItemHandle(item.id)}
style={{color:"red"}}>X
</span>
{item.subItems?.length ? <Menu propsItems={item.subItems}/>:"" }
{!item.subItems.length && <div>
<input value={inputValue} onChange={(e)=>setInputValue(e.target.value)}
type="text" placeholder={"Add item"}/>
<button onClick={addItemHandle}>Add Item</button>
</div>  }
</span>
</li>
})}
</ul>
<div>
<input value={inputValue} onChange={(e)=>setInputValue(e.target.value)}
type="text" placeholder={"Add item"}/>
<button onClick={addItemHandle}>Add Item</button>
</div>

</div>
)
}
export default Menu