我有一個網格，其中有多個按鈕，按鈕的數量因行而異。例如，第 1 行可能有 4 個按鈕，第 2 行可能有 3 個，第 3 行可能有 3 個，等等。我試圖將其設定為當我單擊一個按鈕時，它不僅會更改其背景顏色，還會更改每個網格中也具有相同文本的按鈕。所以如果我的按鈕看起來像這樣：
[ text ] [ moreText ] [ someMoreText ]
[ texting] [ textAgain ] [text]
[textAgain] [ someMoreText]
這個想法是，當我單擊[ text ]第 1 行中的按鈕時，它也會更改第 2 行第 3 列中的按鈕，該按鈕也是[ text ].
現在，我可以通過一個按鈕進行更改，但我一直堅持讓其余按鈕更改。下面是我的代碼。
網格組件.js
import React from "react";
import ButtonComponent from "./ButtonComponent";
const GridComponent = ({ arrayOfArray }) => {
const renderColumns = (array) => {
const columns = array.map((buttonText, index) => {
return (
<div key={index}>
<div className="column">
<ButtonComponent buttonText={buttonText} />
</div>
</div>
);
});
return columns;
};
const renderRows = () => {
const rows = arrayOfArry.map((array, index) => {
return (
<div key={index} className="row">
{renderColumns(array)}
</div>
);
});
return rows;
};
return (
<div>
<div className="ui grid">{renderRows()}</div>
</div>
);
};
export default GridComponent;
按鈕組件.js
import React, { useState } from "react";
const ButtonComponent = ({ buttonText }) => {
const [status, setStatus] = useState(false);
const color = status ? "green" : "blue";
return (
<div className={`ui ${color} button`} onClick={() => setStatus(!status)}>
{buttonText}
</div>
);
};
export default ButtonComponent;
uj5u.com熱心網友回復：
您需要在GridComponentlevel 上維護 state ，而不是在 each 上ButtonComponent，它不知道其他按鈕。
您可以通過使用將按鈕文本映射到其狀態的“映射”物件來完成此操作。
const GridComponent = ({ arrayOfArray }) => {
const [statuses, setStatuses] = useState({});
...
并將此地圖和更新函式傳遞給ButtonComponent：
<ButtonComponent
buttonText={buttonText}
status={statuses}
updateStatus={setStatuses}
/>
并且在ButtonComponent設定顏色基于地圖中此按鈕文本的狀態：
const ButtonComponent = ({ buttonText, status, updateStatus }) => {
const color = status[buttonText] ? "green" : "blue";
return (
<div
className={`ui ${color} button`}
onClick={() =>
updateStatus({ ...status, [buttonText]: !status[buttonText] })
}
>
{buttonText}
</div>
);
};
你可以在codeandbox上看到它是如何作業的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/395475.html
標籤：javascript 反应