react钩子中MouseMove上的事件侦听器:事件对象未定义或clientX/Y为null

Question

我正在尝试将鼠标移动事件绑定到该事件。但无论我做什么，要么e为空，要么e.clientX和Y为空。

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 
);
}

控制台日志：

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

此外，我被这个警告淹没了，即使在阅读了提供的链接后，我也不明白

警告：由于性能原因，会重用此合成事件。如果您看到这种情况，则表示您正在访问已发布/无效合成事件的属性pageY。这被设置为null。如果必须保留原始合成事件，请使用event.persist((。请参阅https://fbme/react事件池以获取更多信息。

Answer 1

由于合成事件是池化的，因此在调用事件回调后，所有事件属性都将无效。

然而，事件属性仍然可以访问，如：

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

或者使用event.persist()从池中删除此合成事件。

const handleMove = (e) => {
e.persist();
console.log(e); // has value for clientX, etc
}

Answer 2

那里发生的事情是，您正在尝试console.log()一个合成事件。React给出了这个错误。这是完全合理的，原因如下，正如React文档所述：

由于性能原因，此合成事件被重用。如果您看到此情况，则表示您正在访问发布/无效合成事件上的属性pageY。这被设置为null。如果必须保留原始合成事件，请使用event.persist((.

因此，React重用一个合成事件对象。这就是为什么在每个事件处理程序结束时，所有字段都将无效。它将我们引向经验法则：

您不能访问合成事件对象。这是一种异步方式。

这就是React抱怨的原因，因为在合成事件无效后，您试图访问控制台中的合成事件对象。解决这个问题的方法是，要么调用合成事件的persist函数来持久化所有字段，要么立即使用您需要的字段。

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
}

希望有帮助：(

Answer 3

您没有传递事件。

<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>