为 ReactJS 游戏添加高亮功能

Question

https://github.com/qrbaxter/dice_game

这是我制作的骰子游戏。两个关键文件是 Game.js 和 Die.js。

我正在尝试开发一个名为 [selected, setSelected] = useState(false) 的状态。

在我拥有的六个骰子中，Roll Dice 当然会掷出新的随机骰子。我希望能够点击 1 和 5 使它们变红，然后“Bank Points”按钮将红色骰子存入积分，1 值 100 分，5 值 50 分。

但问题是我不知道如何分配这个状态，或者至少，我似乎对它的去向感到困惑。我已经做了三天了，还没弄明白。

我需要 github 的上下文，因为它是一个非常具体的上下文问题。对不起，如果它很乏味。

我已经尝试设置状态和分配道具，但我只是空白我缺少什么。

Answer 1

您正在为

onClick

文件中的

Die

实例添加一个

Game.js

处理程序

<Die key={index} value={die.value} onClick={() => setDice(prevDice => {
  let newDice = [...prevDice];
  if (newDice[index].value === 0) {
    newDice[index] = { value: Math.floor(Math.random() * 6) + 1 };
  }
  return newDice;
})} />

但是此处理程序未连接到

Die

组件中的任何回调。你需要添加它：

export default function Die(props) {
  return (
    <div>
      <h2 className="theBigDice" onClick={props.onClick}>{getDiceSymbol(props.value)}</h2>
    </div>
  );
}

从那里，您可以使用 onClick 处理程序将选定的索引添加到另一个状态变量，然后您可以使用它来控制

style

或

className

（记得在

Die

组件中使用它们）

const [selected, setSelected] = useState([]);

if (!selected.includes(index)) setSelected([...selected, index]);

最后，您可以在

bankPoints

方法中使用选定的索引来收集选定骰子的值