我无法从 React 中的事件侦听器上的函数更改变量

Question

我有一个窗口事件侦听器，它调用一个更改变量的函数。但是，当我将 varibale 分配给 prop 时，它不会改变：mousemove  var x = null  var y = null  const cursor = (e) => {    x = e.screenX + 'px'    y = e.screenY + 'px'    console.log(x, y)    return x, y  }  window.addEventListener('mousemove', cursor)我试图在事件监听器中直接更改它(window.addEventListener('mousemove', //everything in cursor），但这样我就无法访问变量了。e我也不能将其与状态一起使用，因为出于某种原因，它变得太滞后并且崩溃。我怎样才能做到这一点？提前致谢。这就是我在vscode中看到的：（这是在 App 组件中，变量和 evenet 侦听器也在 App 中。沙盒：https://codesandbox.io/s/vigorous-agnesi-9l1ic?file=/src/App.js

Answer 1

组件仅在状态或道具更新时重新渲染。 没有状态或道具，所以它永远不会重新渲染，因此孩子永远不会重新渲染。AppCursor

您可以使用附加到的 ref，并直接设置顶部和左侧属性。请不要忘记在卸载组件时删除事件侦听器。Cursor

import React, { useEffect, useRef } from "react";

import "./styles.css";

import styled from "styled-components";

const Cursor = styled.div`

  height: 30px;

  width: 30px;

  border-radius: 50%;

  border: 1.5px solid black;

  position: absolute;

`;

export default function App() {

  const posRef = useRef(null);

  const cursor = e => {

    const { clientX = 0, clientY = 0 } = e;

    posRef.current.style.left = clientX + "px";

    posRef.current.style.top = clientY + "px";

    // console.log(clientX, clientY);

  };

  useEffect(() => {

    window.addEventListener("mousemove", cursor);

    return () => window.removeEventListener("mousemove", cursor);

  }, []);

  return (

    <div className="App">

      <h1>Demo</h1>

      <Cursor ref={posRef} />

    </div>

  );

}

编辑

正如@KirillSkomarovskiy所指出的那样，使用状态并不是使页面陷入困境并崩溃的原因。我怀疑这是/正在添加多个/重复的处理程序，这些处理程序没有被正确清理（可能通过记录每个更新的位置来增加）。mousemove

const Cursor = styled.div`

  height: 30px;

  width: 30px;

  border-radius: 50%;

  border: 1.5px solid black;

  position: absolute;

  transform: translate(-50%, -50%);

  top: ${props => props.yPos};

  left: ${props => props.xPos};

`;

export default function App() {

  const [pos, setPos] = useState({ x: 0, y: 0 });

  useEffect(() => {

    const cursor = e => {

      setPos({

        x: e.clientX + "px",

        y: e.clientY + "px"

      });

      // console.log(e.clientX, e.clientY);

    };

    window.addEventListener("mousemove", cursor);

    return () => window.removeEventListener("mousemove", cursor);

  }, []);

  return (

    <div className="App">

      <h1>Demo</h1>

      <Cursor xPos={pos.x} yPos={pos.y} />

    </div>

  );

}

Answer 2

变量 永远不会被有效地更新，因为它是一个 ES6 箭头函数，它以某种方式工作，所以如果你想从 传递值到 或 ，那么你也应该把它们当作函数：xycursor()functionalcursor()xy

x = (callback) =>{

   return callback;

}

y = (callback) =>{

   return callback;

}

现在，您可以将值传递给 和 ：xy

const cursor = (e) => {

    x (e.screenX + 'px');

    y (e.screenY + 'px');

}

然后，您的事件侦听器调用 ：cursor(e)

window.addEventListener('mousemove', cursor);

无论你想在哪里使用的值，你只需要称它们为：或.xyx()y()

这就是工作原理！ES6 Functional Programming