我正在尝试用reactjs做一个井字游戏。我有一个名为setSquareValue
的函数来设置方块的值为X
,但当我点击一个方块时,所有其他方块也填充了X
。
层次结构是Game.js -> Board.js -> Square.js
。我正在使用Game.js
中的useState()
,并且函数setSquareValue
也在Game.js
中。我正在通过Board.js
将函数传递给Square.js
。
下面是我的代码:游戏.js
import React, { useState } from 'react';
import './Game.css'
import Board from './Board';
const Game = () => {
const [value, setValue] = useState(null);
const setSquareValue = () => {
setValue("X")
}
return (
<div className='game'>
<h1 style={{color: "#fff"}}>Tic Tac Toe</h1>
<h4 style={{color: "#2D033B"}}>Winner: </h4>
<Board value={value} setSquareValue={setSquareValue} />
</div>
);
};
export default Game;
董事会.js
import React from "react";
import Square from "./Square";
import "./Board.css";
const Board = ({ value, setSquareValue }) => {
const squareKeys = [1, 2, 3, 4, 5, 6, 7, 8, 9];
return (
<div className="board">
{squareKeys.map(squareKey => (
<Square
key={squareKey}
value={value}
setSquareValue={setSquareValue} />
))}
</div>
);
};
export default Board;
方形.js
import React from "react";
import "./Square.css";
const Square = ({ value, setSquareValue }) => {
return (
<div className="square" onClick={() => setSquareValue()}>
{value}
</div>
);
};
export default Square;
我想,当我点击某个正方形时,只有那个正方形填充了X
,但是每个正方形都填充了X
,我该怎么解决这个问题呢?
我试过了,但是X
出现在游戏的每个盒子里。
已编辑:添加了CSS代码
游戏.css
.game {
background-color: #AD7BE9;
width: 100%;
height: 100vh;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
董事会.css
.board {
background-color: #645CBB;
color: #fff;
padding: 1rem;
margin-top: 1rem;
border-radius: 5px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
方形.css
.square {
border: 1px solid #fff;
height: 5rem;
width: 5rem;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
4条答案
按热度按时间mklgxw1f1#
您将值传递给map函数中的每一个正方形,对于解决方案,您可以将
value
状态和setSquareValue
函数移动到正方形组件,以便每个正方形本身都有自己的值。更新的Square.js:
你也不再需要把
value
和setSquareValue
从Game.js传递到Board.js和Square.js;rdlzhqv92#
您正在为
Game
组件中的所有正方形创建一个唯一状态。因此,如果您更改任何时间,所有正方形的状态都会更改,因此会出现此问题。因此,您可以做的是在Square
组件中创建一个单独的状态,而不是公共状态,如下所示:CODESANDBOX LINK
hfsqlsce3#
问题在于您跟踪
value
的位置。将存储value
状态的逻辑从Game.js
移动到Square.js
当你的应用启动时,有一个初始值设置为
value
的Game
示例。然后,你将这个值传递给Board
,Board
会将同一个值渲染9次。同样,当你更改这个值时,它会在Game
中更改,然后传递给Board
,最后渲染9次。让
Square
存储自己的状态。pcrecxhr4#
这是因为您只使用一个状态变量来表示所有平方:const [值,设置值] =使用状态(null);
你可以声明一个数组变量,它的长度是9,即9的平方.
游戏.js
董事会.js
方形.js