如何定位 DOM 并更改样式以与映射元素反应

Question

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

我目前正在使用 getElementByID 在单击按钮时更改按钮样式。我认为这不是反应的好习惯。

如果按钮是用地图动态显示的，我可以使用 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上的动画打破了active风格，所以我不能使用active伪元素）

Answer 1

您可以通过添加新状态并按该状态切换 active class 来实现。编写类似这样的代码。

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 class。

如何定位 DOM 并更改样式以与映射元素反应

How to target DOM and change style in react with mapped elements

javascript

reactjs

use-ref