如何在ReactJs中为特定组件设置值

yqyhoc1h  于 2023-02-18  发布在  React
关注(0)|答案(4)|浏览(188)

我正在尝试用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;
}
mklgxw1f

mklgxw1f1#

您将值传递给map函数中的每一个正方形,对于解决方案,您可以将value状态和setSquareValue函数移动到正方形组件,以便每个正方形本身都有自己的值。

更新的Square.js:

import React from "react";
import "./Square.css";

const Square = () => {
const [value, setValue] = useState(null);
  const setSquareValue = () => {
    setValue("X")
  }
  return (
    <div className="square" onClick={setSquareValue}>
      {value}
    </div>
  );
};

export default Square;

你也不再需要把valuesetSquareValue从Game.js传递到Board.js和Square.js;

rdlzhqv9

rdlzhqv92#

您正在为Game组件中的所有正方形创建一个唯一状态。因此,如果您更改任何时间,所有正方形的状态都会更改,因此会出现此问题。因此,您可以做的是在Square组件中创建一个单独的状态,而不是公共状态,如下所示:
CODESANDBOX LINK

const Square = () => {
  const [value, setValue] = useState(null);
  const setSquareValue = () => {
    setValue("X");
  };
  return (
    <div className="square" onClick={setSquareValue}>
      {value}
    </div>
  );
};
hfsqlsce

hfsqlsce3#

问题在于您跟踪value的位置。将存储value状态的逻辑从Game.js移动到Square.js
当你的应用启动时,有一个初始值设置为valueGame示例。然后,你将这个值传递给BoardBoard会将同一个值渲染9次。同样,当你更改这个值时,它会在Game中更改,然后传递给Board,最后渲染9次。
Square存储自己的状态。

pcrecxhr

pcrecxhr4#

这是因为您只使用一个状态变量来表示所有平方:const [值,设置值] =使用状态(null);
你可以声明一个数组变量,它的长度是9,即9的平方.

游戏.js

import React, { useState } from 'react';
import './Game.css'
import Board from './Board';

const Game = () => {
  const [value, setValue] = useState(Array(9).fill(''));
  const setSquareValue = (index) => {
    let values = [...value];
    values[index] = 'X';
    setValue(values);
  }
  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, index) => (
        <Square 
        key={squareKey} 
        value={value[index]}
        ind = {index}
        setSquareValue={setSquareValue} />
      ))}
    </div>
  );
};

export default Board;

方形.js

import React from "react";
import "./Square.css";

const Square = ({ value, ind, setSquareValue }) => {
  return (
    <div className="square" onClick={() => setSquareValue(ind)}>
      {value}
    </div>
  );
};

export default Square;

相关问题