如何在React中訪問Synthetic事件的屬性？

Question

例如，在合成touchEvents中：

onTouchCancel onTouchEnd onTouchMove onTouchStart

該文檔列出了這些屬性：

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

如何嚴格使用JavaScript DOMTouchList targetTouches jQuery訪問這些屬性（例如DOMTouchList targetTouches ？

Answer 1

toggle(e) {
  console.log('e.ctrlKey', e.ctrlKey);
}

對於targetTouches，您可以執行以下操作 ：

function touches_in_target(ev) {
  // Return true if all of the touches are within the target element;
  // otherwise return false.
  return (ev.touches.length == ev.targetTouches.length ? true : 
  false);
}

Answer 2

您可以從傳遞給事件屬性的回調函數訪問事件的那些屬性。 例如：

onTouchStart={event => { /* accessing metaKey */ console.log(event.metakey) }}

以下是一個實時示例。 我沒有使用touchEvents，因為那僅適用於移動設備。 我正在通過onClick事件訪問pageX屬性。

 const Test = () => <div style={{height: 200, width: 200, backgroundColor: 'red'}} onClick={e => console.log(e.pageX)} /> ReactDOM.render(<Test />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>