为啥按钮在点击时改变位置？

Posted 2023-02-22

【中文标题】为啥按钮在点击时改变位置？

【英文标题】：why the Button changing position onClick?为什么按钮在点击时改变位置？

【发布时间】：2020-08-23 08:56:38

【问题描述】：

我正在使用 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;

【问题讨论】：

建立一个工作的sn-p

这个空间看起来和你的 X/O 大小一样，只是说......请一个工作的 stackblitz 或其他东西来测试你的代码

我看到了 .button 类的 css，但我没有看到该类实际使用的任何地方。如果出现意外移动，请包含按钮代码。

编辑您的问题，然后单击正文部分左起第 7 个按钮的创建片段按钮。添加您的问题的工作片段。包括所有相关代码，以便其他人可以帮助解决问题。

查看您的 <Square/> 组件以及您应用到它的任何样式可能会有所帮助。

【参考方案1】：

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

问题的解决方法：

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