Ich versuche, ein Mausbewegungsereignis an das Ding zu binden. Aber was auch immer ich tue, entweder ist e leer oder e.clientX und Y ist null.

const App = (props) => {
    const [move, setMove] = useState({"ix": 0, "iy": 0});

    const handleMove = (e) => {
        console.log(e);
    }

    return (
        <div onMouseMove={handleMove} width="500" height="500"></div> //e exists but clientX is null
        <div onMouseMove={() => handleMove()} width="500" height="500"></div> //e undefined 
    );
}

Konsolenprotokoll:

{…}
_dispatchInstances: null
_dispatchListeners: null
_targetInst: null
altKey: 
bubbles: 
button: 
buttons:
cancelable: 
clientX: null
clientY: null

Außerdem bin ich mit dieser Warnung überflutet, die ich auch nach dem Lesen des bereitgestellten Links nicht verstehe

Warnung: Dieses synthetische Ereignis wird aus Leistungsgründen wiederverwendet. Wenn Sie dies sehen, greifen Sie bei einem freigegebenen / annullierten synthetischen Ereignis auf die Eigenschaft pageY zu. Dies wird auf null gesetzt. Wenn Sie das ursprüngliche synthetische Ereignis beibehalten müssen, verwenden Sie event.persist (). Weitere Informationen finden Sie unter https: // fb me / react-event-pooling.

3
user6329530 22 Feb. 2020 im 20:20

3 Antworten

Beste Antwort

Da das synthetische Ereignis zusammengefasst ist, werden alle Ereigniseigenschaften nach dem Aufrufen des Ereignisrückrufs ungültig.

Auf Ereigniseigenschaften kann jedoch weiterhin wie folgt zugegriffen werden:

const handleMove = (e) => {
  console.log(e) // nullified object
  console.log(e.clientX); // has value
}

Oder verwenden Sie event.persist(), um dieses synthetische Ereignis aus dem Pool zu entfernen.

const handleMove = (e) => {
  e.persist();
  console.log(e); // has value for clientX, etc
}
1
Joseph D. 22 Feb. 2020 im 17:43

Was dort passiert, ist, dass Sie versuchen, ein synthetisches Ereignis console.log(). Und React gibt Ihnen diesen Fehler. Was völlig vernünftig ist, ist hier der Grund, wie in der React Dokumentation angegeben:

Dieses synthetische Ereignis wird aus Leistungsgründen wiederverwendet . Wenn dies angezeigt wird, greifen Sie bei einem freigegebenen / ungültigen synthetischen Ereignis auf die Eigenschaft pageY zu. Dies wird auf null gesetzt. Wenn Sie das ursprüngliche synthetische Ereignis beibehalten müssen, verwenden Sie event.persist ().

Ein synthetisches Ereignisobjekt wird also von React wiederverwendet. Aus diesem Grund werden alle Felder am Ende von jedem Ereignishandler ungültig. Es führt uns zur Faustregel:

Sie können nicht auf ein synthetisches Ereignisobjekt zugreifen, das asynchron ist.

Aus diesem Grund hat sich React beschwert, weil Sie versucht haben, auf ein synthetisches Ereignisobjekt in Ihrer Konsole zuzugreifen, nachdem das synthetische Ereignis aufgehoben wurde. Um dies zu umgehen, rufen Sie entweder die Funktion persist des synthetischen Ereignisses auf, um alle Felder beizubehalten, oder verwenden Sie einfach die Felder, die Sie sofort benötigen.

    const handleMove = (e) => {
        console.log(e); // <~ will cause error to come up
        console.log(e.pageY) // <~ no error
    }

    const handleMovePersist = (e) => {
        e.persist()
        console.log(e) // <~ no error, because synthetic event is persisted
    }

Ich hoffe es hilft :)

1
Max 22 Feb. 2020 im 17:49

Sie bestehen die Veranstaltung nicht.

<div onMouseMove={(e) => handleMove(e)} width="500" height="500"></div>
// Get a hook function
const {useState} = React;

  

function App() {

  const [move, setMove] = useState({ ix: 0, iy: 0 });
  
  const getMousePos = e => {
    return { x: e.clientX, y: e.clientY };
  };
  
  const handleMove = e => {
    console.log(getMousePos(e));
  };
  
  
  return (
    <div
        onMouseMove={e => handleMove(e)}
        style={{ backgroundColor: "blue", width: 500, height: 500 }}
      >
      </div>
  );
}
// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
1
Junius L. 22 Feb. 2020 im 17:48