时间戳

首页 > 解决方案 > 为什么按钮在点击时改变位置？

javascript - 为什么按钮在点击时改变位置？

问题描述

我正在使用 React Hook 构建井字游戏。当井字游戏正常工作时，按钮在点击时会改变位置。图1是初始游戏板，图2是点击按钮后！它正在下降。如果我连续点击三个按钮，它会转到上一个位置（图 3）。

井字形

井字形

我不希望按钮改变位置。

我的代码如下：

import React, {useState} from 'react';

    import Square from './Square';
    function Board(){
        const [boardSquares, setBoardSquares] = useState(Array(9).fill(null));
        const [xIsNext, setXIsNext] = useState(true);

        const handleClick = index =>{
            const squares = [...boardSquares]; 

            if( whoIsTheWinner(boardSquares) || squares[index]) return;       
            squares[index] = xIsNext ? "X" : "O";
            setBoardSquares(squares);
            setXIsNext(!xIsNext);


        };
           const renderSquare = (index) => {
            return <Square value={boardSquares[index]} onClick={()=>handleClick(index)}/>
        };
       let status ;
        const winner = whoIsTheWinner(boardSquares);

        status = winner ? 
        `Winner is: ${winner}` :
        `Next player: ${xIsNext ? "X" : "O"}`; 

        function whoIsTheWinner(squares){
                const winningLine = [
                    [0, 1, 2],
                    [0, 3, 6],
                    [0, 4, 8],
                    [1, 4, 7],
                    [2, 5, 8],
                    [3, 4, 5],
                    [6, 7, 8],
                    [0, 4, 8]
                   ];
                   console.log(winningLine)
                   for (let i=0; i < winningLine.length; i++){
                       const [a,b,c]=winningLine[i];
                       if (squares[a] && squares[a] === squares[b] && squares[b]===squares[c])
                       return squares[a]; 
                   } 

                return null;
                };

        return(
            <div>
                <div>               
                   {status}
                </div>
                <div>
                    {renderSquare(0)}
                    {renderSquare(1)}
                    {renderSquare(2)}
                </div> 
                <div>
                    {renderSquare(3)}
                    {renderSquare(4)}
                    {renderSquare(5)}
                </div> 
                <div>
                    {renderSquare(6)}
                    {renderSquare(7)}
                    {renderSquare(8)}
                </div>  

            </div>
        );
    }

    export default Board;

CSS代码是：

.button {
  width: 150px;
  height: 150px;
  background-color: greenyellow;
  margin: 0;
  padding: 0;
}

.button:active {
  background-color: grey;
}

.button:hover {
  background-color: palegreen;
}

标签： javascriptcssreactjsbutton

解决方案

由于按钮中的文本为空，我也遇到了这个麻烦并将其范围缩小。如果按钮文本不为空，则单击后按钮位置不会移动，原因我仍然不明白。

问题的解决方法：

    function Board(){
        ....
        ....Array(9).fill("\0"));
        ....

推荐阅读