主页 / 问题 / 1585119
Accepted
rabbit
Asked:2024-06-25 09:11:44 +0000 UTC2024-06-25 09:11:44 +0000 UTC

通过按键盘键react js删除数组元素

  • 772

我有可以很好地删除当前组件的代码。请告诉我如何通过按键盘按键从数组中删除当前组件？

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>
  )
}
reactjs

1 个回答

  1. Best Answer

    请告诉我如何通过按键盘按键从数组中删除当前组件？

    我会建议这个选项...

    //
function Item(props) {
  const {data, on, act} = props
  const cls = on ? 'on' : null
  const cl = _ => act(data.id)
  return <li className={cls} onClick={cl}>
    {data.name}
  </li>
}
//
function App() {
  const [arr, setArr] = React.useState([
    {id: 1, name: 'Петя'},
    {id: 2, name: 'Вася'},
    {id: 3, name: 'Света'},
    {id: 4, name: 'Оля'},
    {id: 5, name: 'Иван'},
    {id: 6, name: 'Ира'},
  ])
  const [id, setId] = React.useState()
  const del = e => {
    if (e.key !== 'Delete') return
    setArr(old => old.filter(o => o.id !== id))
  }
  React.useEffect(_ => {
    document.addEventListener('keyup', del)
    return _ => document.removeEventListener('keyup', del)
  }, [id])
  return <ul>
    {arr.map(o => <Item key={o.id} data={o} on={id === o.id} act={setId} />)}
  </ul>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
    .on {
  background-color: yellow;
}
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

    • 1

相关问题