在React Typescript中，当button被点击时，为每个item运行函数

Question

我必须创建按钮。次取决于我的数组,所以我做了以下

const Sandbox = () => {
const [isClicked, setClicked] = useState(false);
const clickMe = (): void => {

console.log("say hello new");
setClicked(!isClicked);

};
let buttonContents = [
{ id: 1, Title: "One", Description: "First" }, //isClicked
{ id: 2, Title: "Two", Description: "Second" },
{ id: 3, Title: "Three", Description: "Third" },
{ id: 4, Title: "Four", Description: "Fourth" },
];
let buttonContentsList: any[] = [];

buttonContents.forEach((item) => {
buttonContentsList.push(
<BigButton
onClick={() => {
clickMe(); 
}}
Title={item.Title}
Description={item.Description}
clicked={isClicked}
></BigButton>
);
});
return <>{buttonContentsList}</>;
};
export default Sandbox;

当我这样做并点击一个按钮时，我的所有按钮都被选中了。但是我希望只有一个按钮被选中，当另一个按钮被点击时，当前按钮的状态应该改变，其中一个按钮被点击为未被选中，另一个按钮被点击为被选中，这样在按钮组中只有一个按钮被点击。这里给出的代码是从父组件，我做的道具和状态传递给没有问题的孩子。我应该做什么改变来达到我所需要的?

Answer 1

有多种方法可以实现你想要的。但最接近你的解决方案是:

import {useState} from 'react'
const Sandbox = () => {
const [clickedId, setClickedId] = useState(null);
const clickMe = (id) => setClickedId(id);
let buttonContents = [
{ id: 1, Title: "One", Description: "First" },
{ id: 2, Title: "Two", Description: "Second" },
{ id: 3, Title: "Three", Description: "Third" },
{ id: 4, Title: "Four", Description: "Fourth" },
];
let buttonContentsList = [];

buttonContents.forEach((item) => {
buttonContentsList.push(
<BigButton
onClick={() => {
clickMe(item.id); 
}}
Title={item.Title}
Description={item.Description}
clicked={clickedId === item.id}
></BigButton>
);
});
return <>{buttonContentsList}</>;
};
export default Sandbox;

对不起，我对按钮组件做了一些修改。但我希望你能明白。