同步更新react使用状态

Question

我需要使用事件侦听器获取单击坐标并使用 React hook usestate 存储它，以便我可以使用它来显示菜单。

看起来 usestate 是异步的，并且值仅在第二次单击时更新。

我的代码如下：

const [xPosition, setXPosition] = useState<number>(0);
const [yPosition, setYPosition] = useState<number>(0);
let cmenu;


const btnClick = () => {
document.addEventListener("click", function (event) {
  let x = event.pageX;
  let y = event.pageY;
  setYPosition(y);
  setXPosition(x);
});
cmenu.open(yPosition, xPosition);
  };

谢谢

Answer 1

我不确定你想在这里实现什么，但是按钮的 onClick 函数提供了一个事件参数：

const btnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    cmenu.open(event.clientX, event.clientY);
  };

你应该像这样调用这个函数：

  <button onClick={btnClick}>click</button>

Answer 2

乍一看，我觉得你并没有理解React的功能。

您的代码仅在第一次单击后由侦听器添加到元素。