如何在 JSX、ReactJs 中单击后禁用按钮？

Question

我正在制作一款 2 人井字游戏，但我找不到如何防止玩家点击已经点击过的方块。

目前，如果玩家点击一个已经存在的 X/O，它会将状态更改为 O/X。我想禁用它。

Board.js

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)}
    />;
  }

  const handleClick = (i) => {
    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>
  );
}

Square.js

import React from "react";

export default function Square ({ squares, handleClick, disabled })  {
  return (
    <button className="square" onClick={()=>handleClick()} disabled={disabled}>
      {squares}
    </button>
  );
}

我使用状态来防止点击已经按下的按钮，但它会禁用游戏中的所有按钮，而不仅仅是被按下的按钮。

Answer 1

您应该将 disabled 道具添加到您的 Square 中，其值基于方块是否有数据，例如

const renderSquare = (i) => {
    return <Square 
      squares={squares[i]} 
      handleClick={()=>handleClick(i)}
      disabled={!!squares[i]}
    />;
  }

如何在 JSX、ReactJs 中单击后禁用按钮？

How to disable a button once clicked in JSX, ReactJs?

javascript

jsx

reactjs

react-hooks