React中自定义Reset组件的onClick事件不生效问题求助

你的问题出在Reset组件的回调传递写法错误，导致点击按钮时根本没触发handleReset函数。

核心错误点 #

在Board组件的JSX里，你这样传递回调：

<Reset onResetClick={() => handleReset}/>

这里的箭头函数() => handleReset只是返回了handleReset函数的引用，并没有实际调用它。所以点击按钮时，箭头函数执行后什么也没做，自然不会有日志输出，也不会重置squares数组。

两种修复方案 #

方案1：在箭头函数里调用handleReset

把回调改成调用函数的形式：

<Reset onResetClick={() => handleReset()}/>

方案2：直接传递handleReset函数引用

因为onResetClick接收的就是一个函数，不需要额外的箭头函数包裹，直接传函数本身即可：

<Reset onResetClick={handleReset}/>

额外优化：重置玩家状态 #

另外，重置游戏时别忘了把xIsNext也重置为初始值true，不然重置后下一个玩家可能显示错误。修改handleReset函数：

function handleReset() {
  console.log("In handleReset function");
  setSquares(Array(9).fill(null));
  setXIsNext(true); // 新增这行，重置玩家顺序
}

修改后的关键代码片段 #

// Board组件里的Reset调用
<div className="reset">
  <Reset onResetClick={handleReset}/>
</div>

// 完善后的handleReset
function handleReset() {
  console.log("In handleReset function")
  setSquares(Array(9).fill(null));
  setXIsNext(true);
}

这样修改后，点击Reset按钮就能正常触发重置逻辑，控制台也会输出日志，游戏状态会完全回到初始状态。

内容的提问来源于stack exchange，提问作者Joey Pirone