我有可以很好地删除当前组件的代码。请告诉我如何通过按键盘按键从数组中删除当前组件？
const [SimpleArr, setSimpleArr] = useState([])
{SimpleArr.map((_, i) => (
<SimpleComponent key={i} id={i} Arr={SimpleArr} setArr={setSimpleArr} />
))}
SimpleComponent.jsx
export function SimpleComponent({id, Arr, setArr}) {
return (
<button onClick={() => {setArr(Arr.filter((_, i) => i !== id))}}>
Remove
</button>
)
}
编辑
const RemoveElement = (Index, Field, setField) => {
setField(Field.filter((_, i) => i !== Index))
}
const [SelectedElement, setSelectedElement] = useState()
const SelectedElementRemove = (event) => {
if (event.key === "Delete" && SelectedElement != null) {
RemoveElement(parseInt(SelectedElement, 10), SimpleComponentArr, setSimpleComponentArr)
setSimpleComponentArr((prev) => {
localStorage.setItem("SimpleComponentArr", JSON.stringify([...prev]))
return [...prev];
});
setSelectedElement(null)
}
}
useEffect(() => {
document.addEventListener("keydown", SelectedElementRemove, false)
return () => {
document.removeEventListener("keydown", SelectedElementRemove, false)
}
}, [SelectedElementRemove])
{SimpleComponentArr.map((_, i) => <SimpleComponent key={i} id={i} setSE={setSelectedElement} />)}
SimpleComponent.jsx
export function SimpleComponent({ id, setSE }) {
return (
<div onClick={event => {setSE(event.target.dataset.id)}} data-id={id}>
Text
</div>
)
}
