reactjs中一次只有一個div處於活動狀態

Question

我連續三個 div 和三行，在一行中我們一次只選擇一個 div，另一個 div 是選擇之前的 div 將取消選擇。 我的代碼喜歡

 <div className="row">
    <div className="heil select"><button>Click One</button></div>
    <div className="heil"><button>Click Two</button></div>
    <div className="heil"><button>Click Three</button></div>
</div>
<div className="row">
    <div className="heil select"><button>Click One</button></div>
    <div className="heil"><button>Click Two</button></div>
    <div className="heil"><button>Click Three</button></div>
</div>
<div className="row">
    <div className="heil select"><button>Click One</button></div>
    <div className="heil"><button>Click Two</button></div>
    <div className="heil"><button>Click Three</button></div>
</div>

選擇類用於單擊 div 將突出顯示，這里靜態寫下如何在 react 中完成此操作，並連續選擇一個 div 類似單選按鈕 我是 react-js 中的新手，請解決這個問題，提前致謝

Answer 1

我剛剛寫了一個你想要的工作示例。

import { useState } from "react";

export default function Rows() {
const numberOfRows = 3;
const rows = Array(numberOfRows).fill(0);
const cellsEachRow = ["Click One", "Click Two", "Click Three"];
const [selectedCellsIndexes, setSelectedCellsIndexes] = useState(
    Array(numberOfRows).fill(0)
);
const handleCellClick = (parentIndex, childIndex) => {
    setSelectedCellsIndexes((selectedCellsIndexes) => {
        selectedCellsIndexes[parentIndex] = childIndex;
        return [...selectedCellsIndexes];
    });
};
return (
    <div>
        {rows.map((row, parentIndex) => {
            return (
                <div className="row">
                    {cellsEachRow.map((name, childIndex) => {
                        return (
                            <div
                                className={`heil ${
                                    childIndex ===
                                        selectedCellsIndexes[parentIndex] &&
                                    "selected"
                                }`}
                                onClick={() =>
                                    handleCellClick(parentIndex, childIndex)
                                }
                            >
                                <button>{name}</button>
                            </div>
                        );
                    })}
                </div>
            );
        })}
    </div>
);

}