javascript - 从按钮获取getAttribute并将类名切换到body react hooks

Question

我想改进我的代码，使用几个具有自定义类名（attr）的按钮，单击时应添加到正文标记（切换），现在添加第一个按钮只是因为 for("button")[0]但应该适用于每个按钮

import React, { useState, useEffect } from "react"

function Test() {
  const [isClass, setIsClass] = useState(false)

  useEffect(() => {
    const x = document.getElementsByTagName("button")[0].getAttribute("custom-class")
    document.body.classList.toggle(x, isClass)
  }, [isClass])

  return (
    <>
      <button custom-class='test1' onClick={() => setIsClass(!isClass)}>
        Setting test1 className
      </button>
       
      <button custom-class='test2' onClick={() => setIsClass(!isClass)}>
        Setting test2 className
      </button>
    </>
  )
}

export default Test

谢谢

标签： javascriptreactjsreact-hooks

Answer 1

请使用此代码。

let oldStyle = "";

const handleClick = (index) => {
  const x = [...document.getElementsByTagName("button")].map(value => value.getAttribute("custom-class"));
  document.body.classList.contains(x[index]) ? document.body.classList.remove(x[index]) : document.body.classList.add(x[index]);
  if(document.body.classList.length > 1) document.body.classList.replace(oldStyle, x[index]);
  oldStyle = x[index];
}

return (
  <>
    <button custom-class='test1' onClick={() => handleClick(0)}>
      Setting test1 className
    </button>
    
    <button custom-class='test2' onClick={() => handleClick(1)}>
      Setting test2 className
    </button>
  </>
)