React中onkeyup正常更新State但onclick事件无法更新State

开发同时支持物理键盘输入、虚拟键盘点击输入的React应用时，两类输入触发同一处理函数的表现不一致：

• 物理键盘触发keyup事件时，存储输入内容的状态currentGuess长度正常递增，控制台输出为0,1,2,3,4……
• 点击虚拟键盘按钮触发click事件时，currentGuess长度始终输出0，内容无法正常累加

涉及的原有逻辑代码如下：

// 状态定义
const [currentGuess, setCurrentGuess] = useState("");

// 按键回调函数
const handleKeyup = (e) => {
  let pressedKey = "";
  if (typeof e == "string") {
    pressedKey = e;
  }

  const checkPressedKey = pressedKey ? pressedKey : e.key;
  setCurrentGuess((prev) => prev + checkPressedKey);
  console.log(currentGuess.length);
}

// 绑定物理键盘keyup事件
useEffect(() => {
  window.addEventListener("keyup", handleKeyup);
  return () => window.removeEventListener("keyup", handleKeyup);
}, [handleKeyup]);

// 绑定虚拟键盘click事件
useEffect(() => {
  setKeyOnClick();
}, []);

function setKeyOnClick() {
  const allkey = document.querySelectorAll(".key");
  allkey.forEach((btnKey) => {
    btnKey.addEventListener("click", function () {
      handleKeyup(btnKey.dataset.key);
    });
  });
}

虚拟键盘结构代码：

<button className="key" data-key="Q">Q</button>
<button className="key" data-key="W">W</button>
<button className="key" data-key="E">E</button>
<button className="key" data-key="R">R</button>
<button className="key" data-key="T">T</button>
<button className="key" data-key="Y">Y</button>

1. 闭包引用陈旧：绑定虚拟键盘事件的useEffect依赖为空数组，仅在组件首次挂载时执行一次，此时绑定到click事件上的handleKeyup函数，捕获的是首次渲染上下文中的currentGuess初始值（空字符串）。后续组件重渲染、状态更新时，已经绑定到DOM上的旧函数引用不会同步更新，因此每次点击读取到的永远是初始状态值，打印长度始终为0。
2. 违反React开发规范：直接通过document.querySelectorAll获取原生DOM、手动绑定事件的写法脱离了React的渲染-状态同步机制，除了闭包问题外，还容易出现事件重复绑定、内存泄漏、DOM匹配不到元素等异常。
3. 额外问题：React状态更新为异步批处理逻辑，在setCurrentGuess执行后立刻打印currentGuess，拿到的永远是更新前的旧值，本身就无法获取最新状态。物理键盘事件看似正常，是因为绑定物理键盘事件的useEffect依赖了handleKeyup，每次函数引用变化时会重新绑定事件，能拿到最新的闭包值，但这种写法性能和稳定性都有缺陷。

1. 完全移除手动查询DOM绑定原生事件的逻辑，虚拟键盘按钮直接在JSX渲染阶段通过React的onClick属性绑定事件，从根源避免闭包陈旧问题。
2. 用useCallback包裹统一的按键处理函数，保证引用稳定，避免事件重复绑定。
3. 状态更新后的日志逻辑放到单独的、依赖currentGuess的useEffect中执行，保证拿到最新状态值。

修复后的完整核心代码：

import { useState, useEffect, useCallback } from 'react';

function KeyboardInput() {
  const [currentGuess, setCurrentGuess] = useState("");

  // 统一按键处理逻辑，useCallback包裹保证引用稳定
  const handleKeyPress = useCallback((keyValue) => {
    setCurrentGuess((prev) => prev + keyValue);
  }, []);

  // 物理键盘事件绑定，仅在挂载/卸载时执行
  useEffect(() => {
    const physicalKeyboardHandler = (e) => handleKeyPress(e.key);
    window.addEventListener("keyup", physicalKeyboardHandler);
    return () => window.removeEventListener("keyup", physicalKeyboardHandler);
  }, [handleKeyPress]);

  // 监听状态变化打印最新长度
  useEffect(() => {
    console.log(currentGuess.length);
  }, [currentGuess]);

  // 虚拟键盘按键列表，直接在渲染时绑定点击事件
  const keyList = ["Q", "W", "E", "R", "T", "Y"];

  return (
    <div className="keyboard-group">
      {keyList.map(key => (
        <button
          className="key"
          key={key}
          onClick={() => handleKeyPress(key)}
        >
          {key}
        </button>
      ))}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Asifur Rahman