React JSX中如何实现按钮点击后单个禁用？井字棋已落子格子不可点击问题

算力阿峰

2026-9-25

修复方案

你之前的问题出在两个地方：一是没有给每个格子单独传禁用状态，二是点击逻辑里没有做已落子判断，修改方法如下：

1. 修改`Board.js`

首先给handleClick增加已落子判断，避免逻辑层允许覆盖操作；其次给每个Square组件传递对应格子的禁用状态，只要格子已经有值就禁用按钮：

import React, { useState } from 'react'
import Square from './Square'

export default function Board () {

  const [xIsNext, setXIsNext] = useState(true);
  const [squares, setSquares] = useState(Array(9).fill());

  const renderSquare = (i) => {
    return <Square 
      squares={squares[i]} 
      handleClick={()=>handleClick(i)}
      // 新增：当前格子有值则禁用
      disabled={!!squares[i]}
    />;
  }

  const handleClick = (i) => {
    // 新增：如果当前格子已经有棋子，直接终止操作
    if (squares[i]) return
    const newSquares = squares.slice();
    newSquares[i] = xIsNext ? 'X' : 'O';
    setSquares(newSquares);
    setXIsNext(!xIsNext);
  }

  const status = 'Next player: ' + (xIsNext ? 'X' : 'O');

  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );
}