React

Question

에있는 임의의 Dom 요소에 대해 마우스의 X 및 Y 좌표 가져 오기 onmousemove 이벤트 중에 임의의 DOM 요소로 마우스의 X 및 Y 좌표를 검색하는 가장 신뢰할 수있는 방법을 찾고 있습니다. onmouseup 및 onmousedown.

바닐라 자바 ​​스크립트를 작성할 때 e.layerX과 e.layerY을 사용하면 올바른 숫자가 표시됩니다. Mozilla 문서에서 그들은 against using it을 권장합니다. React로 이동 (내 특정 구성 요소 렌더링 기능에서)

return <canvas onMouseMove={ e => this.handleMouseMoved(e) }></canvas>.

더 이상 layerX 또는 layerY에 액세스 할 수 없습니다. 또한 나는 clientX 또는 clientY과 함께 사용하여 마우스의 요소 상대 좌표를 유도하는 offsetX에 액세스 할 수 없습니다.

좌표를 읽는 방법에는 여러 가지가 있습니다. 나는 그들의 의미와 언제 사용해야하는지 혼란 스럽다. 그래서 왼쪽 상단 모서리에 마우스를 놓았을 때 x: 0, y: 0을보고 싶다면 오른쪽 하단 모서리에 마우스를 올리면 어떤 이벤트/합성 이벤트를 볼 수 있습니까? x: <DomElement.width>, y: <DomElement.height?

Answer 1

반응은 성능 향상을 위해 다음 "풀"이러한 이벤트를 SyntheticEvents를 사용하고 (https://facebook.github.io/react/docs/events.html#event-pooling)

의 SyntheticEvent "재사용 될 것 반응과 모든 속성 때문에이 합성 이벤트에서 저장해야"기본 "이벤트를 얻으려면 이벤트 콜백이 호출 된 후에 무효가되어야합니다 ".

그 의미는 무엇입니까?

<canvas onMouseMove={ e => { 
    let nativeEvent = e.nativeEvent; 
    this.handleMouseMoved(nativeEvent); 
}></canvas> 

nativeEvent

당신이 찾고있는 offsetX/Y, layerX/Y 등이 있습니다.