Div изменить размер с React

Question

У меня есть навигация по ящику, и я пытаюсь реализовать опцию изменения размера при перетаскивании мышью. Я добавил элемент div, для которого прослушиваю событие onMouseDown. и когда это событие происходит, я добавляю прослушиватель события mouseup для обновления ширины ящиков при отпускании мыши.

const handleMouseDown = (event: MouseEvent) => {
  document.addEventListener('mouseup', handleMouseUp)
}

const handleMouseUp = (event: any) => {
    const minWidth = 57
    const maxWidth = 600
    if (event.clientX > minWidth && event.clientX < maxWidth) {
      updateLayout({ ...layout, drawerWidth: event.clientX })
    }
  }

<Dragger onMouseDownCapture={handleMouseDown}/>

Все работает нормально с первой попытки, но после этого событие mouseDown не добавляетслушатель события mouseup.

Answer 1

Я думаю, вам может потребоваться удалить прослушиватель событий mouseup после каждого нажатия мыши, иначе приемник событий будет складываться несколько раз и вызывать проблемы.

const handleMouseUp = (event: any) => {
    const minWidth = 57
    const maxWidth = 600
    if (event.clientX > minWidth && event.clientX < maxWidth) {
        updateLayout({ ...layout, drawerWidth: event.clientX })
    }
    document.removeEventListener('mouseup', handleMouseUp)
}