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

【问题标题】：How to disable a button once clicked in JSX, ReactJs?如何在 JSX、ReactJs 中单击后禁用按钮？
【发布时间】：2021-12-31 08:59:45
【问题描述】：

我正在制作一个 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>
  );
}

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

【问题讨论】：

这有点偏离主题，所以我只会记下一个仅供参考的评论。一般来说，以这种方式禁用按钮不符合最佳可访问性实践。它可能会导致屏幕阅读器用户尤其是失去对页面的关注，从而使随后的导航变得困难。我了解这可能与您的情况无关，但可能与访问此问题的其他人有关。除了禁用按钮之外，您还可以考虑忽略已选中方块上的点击处理程序，并使用一些视觉样式将方块标记为选中。

标签： javascript reactjs react-hooks jsx

【解决方案1】：

您应该将 disabled 属性添加到您的 Square 中，其值取决于正方形是否有数据，例如

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

【讨论】：

谢谢。这实际上解决了它。顺便说一句，双感叹号 (!!) 是什么意思？
!! 是! 的两个副本，它是非运算符。基本上，!! 用于将值转换为布尔值。所以另一种方法是disabled={Boolean(squares[i])}