如何在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>