改变网格中多个React元素的状态

Question

我有一个网格，其中有多个按钮，按钮的数量因行而异。例如，第1行可以有4个按钮，第2行可以有3个，第3行可以有三个，等等。我试图让它在单击一个按钮时，不仅会改变背景颜色，还会改变网格中每个具有相同文本的按钮。所以如果我的按钮看起来像这样：

[ text ]  [ moreText ]  [ someMoreText ]
[ texting]  [ textAgain ]  [text]
[textAgain] [ someMoreText]

其想法是，当我单击第1行中的按钮[ text ]时，它也会更改第2行第3列中的按钮，即[ text ]。

现在，我可以按一个按钮进行更改，但我坚持要让其他按钮进行更改。下面是我的代码。

GridComponent.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;

Answer 1

您需要在GridComponent级别维护状态，而不是在每个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>
);
};

你可以看到它是如何在codesandbox 上工作的