удаление элемента массива по нажатию клавиши клавиатуры react js

Question

У меня есть код, который хорошо работает для удаления текущего компонента. Подскажите, пожалуйста, как сделать удаление текущего компонента из массива по нажатию клавиши клавиатуры?

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

EDIT

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

Answer 1

Подскажите, пожалуйста, как сделать удаление текущего компонента из массива по нажатию клавиши клавиатуры?

Предложу такой вариант...

//
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>

БЛОГ НА HUSL

удаление элемента массива по нажатию клавиши клавиатуры react js

Ответы (1 шт):