时间戳

首页 > 解决方案 > 你能在点击时只改变一个类吗？

javascript - 你能在点击时只改变一个类吗？

问题描述

我正在尝试构建战舰项目，现在我生成了一个 10x10 的网格，如下所示：

在此处输入图像描述

但我希望每次点击一个框，它都会将颜色从青色变为黑色。我试过用一种useState方法来做这件事，但它改变了所有的盒子。我希望在每次单击后一个一个地更改这些框

import React, { useEffect, useState } from "react";

import Ship from "../components/ShipGenerate.js";
import "../style/style.css";

function Grid(props) {
    let grid = new Array(10);
    let box = [];
    const [active, setActive] = useState(true);

    console.log(grid);
    console.log(box);
    for (let i = 0; i < grid.length; i += 1) grid[i] = new Array(10).fill(0);

    const rnd = (r) => Math.trunc(Math.random() * r);

    for (let l = 0; l < 40; l += 1) {
        grid[rnd(10)][rnd(10)] = 1;
    }

    for (var x = 0; x < grid.length; x++) {
        for (var y = 0; y < grid.length; y++) {
            if (grid[x][y] === 0) {
                box.push(
                    <div>
                        <div className="piece"></div>
                    </div>
                );
            } else {
                box.push(
                    <div>
                        <div className="boom"></div>
                    </div>
                );
            }
        }
    }

    return (
        <div>
            <div className="box">{box}</div>
        </div>
    );
}

export default Grid;

标签： javascriptreactjs

解决方案

您可以将整个网格用作状态。

然后，当您单击一个框时，您将x和y坐标传递给一个函数，该函数将单击的框从 0 翻转到 1 或反之亦然 - 类似于：

function Grid(props) {
    const emptyGrid = new Array(10);
    for (let i = 0; i < emptyGrid.length; i += 1) {
        emptyGrid[i] = new Array(10).fill(0);
    }

    const [grid, setGrid] = useState(emptyGrid);

    function togglePieceStatus(x, y) {
        setGrid(currentGrid => {
            const position = currentGrid[x][y];
            currentGrid[x][y] = position === 0 ? 1 : 0;
            return currentGrid;
        });
    }

    const box = [];
    for (var x = 0; x < grid.length; x++) {
        for (var y = 0; y < grid.length; y++) {
            const className = grid[x][y] === 0 ? 'piece' : 'boom';
            box.push(
                <div>
                    <div
                        className={className}
                        onClick={() => togglePieceStatus(x, y)}
                    ></div>
                </div>
            );
        }
    }

    return (
        <div>
            <div className="box">{box}</div>
        </div>
    );
}

推荐阅读