如何在映射元素的反应中瞄准DOM和改变样式

Question

我有一个多页表单，为每个可能的答案呈现一个按钮列表。

我目前使用getElementByID来更改按钮样式时，单击按钮。我认为这在react中不是一个好的实践。

我可以使用useRef钩子来瞄准DOM元素并改变它的样式，而不是使用getElementByID，如果按钮是动态显示的地图?

{answers.map((answer, count = 0) => {
return (
<Button
key={count}
id=`button${count}`
onClick={(e) => {        
document.getElementById(`${e.currentTarget.id}`).style.color = "white";
}}
>
<ButtonTitle>{answer.name}</ButtonTitle>
</Button>
);
})}

(safari上的动画破坏了活动样式，所以我不能使用活动伪元素)

Answer 1

您可以通过添加一个新状态并按该状态切换active类来做到这一点。编写如下代码:

const [activeindex, setActiveIndex] = useState("");
return(
<>
{answers.map((answer, count = 0) => {
return (
<Button
key={count}
className={count==activeindex?"acvie":""}
onClick={(e) => {        
setActiveIndex(count)
}}
>
<ButtonTitle>{answer.name}</ButtonTitle>
</Button>
);
})}
}
</>

在css文件中使用。active类。