Как добавить несколько списков событий разного типа в React? - PullRequest
Новая
       4

Как добавить несколько списков событий разного типа в React?

2 голосов
/ 06 января 2020

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

<div onMouseMove={mousemove} 
     onMouseUp={mouseup} 
     onMouseDown={mousedown}
     onTouchMove={touchmove} 
     onTouchEnd={touchend} 
     onTouchStart={touchstart}>some content</div>

Проблема здесь в том, что я не хотел писать так много атрибутов JSX. Так что я подумал об этом 

const elementRef = useRef()

useEffect(()=>{
    elementRef.addeventlistener('mousedown', mousedown)
    {/* add the rest of the event listeners */}
})

<div ref={elementRef}></div>

Но это все еще много кода, поэтому я подумал об этом. 

const eventhandler = e =>{
    switch(e.type){
        case 'mousedown':
            mousedown();
            break;
        {/*add the rest*/}
}
}

Затем каким-то образом назначьте eventhandler моему div , Есть ли способ сделать это (не только React, но ваниль javascript)?

1 Ответ

1 голос
/ 06 января 2020

Вы можете переместить нужный реквизит к объекту, а затем распределить его по компоненту. Например, 

const getMouseEvents = (mousemove, mouseup, mousedown, touchmove) => ({
     onMouseMove: mousemove, 
     onMouseUp: mouseup,
     onMouseDown: mousedown,
     onTouchMove: touchmove
     [...]
});

<div {...getMouseEvents(mousemove, mouseup, mousedown, touchmove)}>
   some content
</div>
...