如何只激活三个按钮中的一个

Question

我用"map"制作了三个按钮。它还指定了一个函数，用于在单击时将false值更改为true。

但是，如果您按下一个按钮，三个按钮都会被激活。如何只激活一个按钮？

false=#ffftrue=蓝色

const [funnalBtn, setFunnalBtn] = useState(false);
const hadleChangeBtnColor = () => {
setFunnalBtn(prev => !prev);
};
<FunnalTarget>
{FUNNAL_DATA.map(data => {
return (
<FunnalButton
key={data.id}
text={data.text}
hadleChangeBtnColor={hadleChangeBtnColor}
funnalBtn={funnalBtn}
/>
);
})}
</FunnalTarget>

在此处输入图像描述在此处输入图像描述

Answer 1

您可以定义一个selectedBtn状态，并将所选目标的id传递给它：

const [selectedBtn, setSelectedBtn] = useState(-1);
const hadleChangeBtnColor = (id) => {
setSelectedBtn(id);
};
<FunnalTarget>
{FUNNAL_DATA.map(data => {
return (
<FunnalButton
key={data.id}
text={data.text}
hadleChangeBtnColor={() => setSelectedBtn(data.id)}
funnalBtn={selectedBtn === data.id}
/>
);
})}
</FunnalTarget>