主页 / 问题 / 1178481
Accepted
Armen
Asked:2020-09-15 20:09:37 +0000 UTC2020-09-15 20:09:37 +0000 UTC

我不明白魔术师如何正确添加或删除与状态关联的类

  • 772

如果我理解正确，UI 的任何更改都应该通过状态发生（状态已更改，UI 已重绘）...有一个汉堡菜单，单击时会从 X 更改为 -- 如何在此处使用状态? 或者根本没有使用状态的意义？

const Burger = (props) => {
const [state, setState] = useState('')
const toggleHandler = (event) => {
    event.target.classList.toggle('active')
}
return (
    <div 
    className="my"
    onClick={toggleHandler}
    ></div>
)
}

这是正确的解决方案还是不值得？

const Burger = (props) => {
const [isPressed, setPressed] = useState(false)
const toggleHandler = (event) => {
    setPressed(!isPressed)
    if(isPressed){
        event.target.classList.add('active')
    }
    else{
        event.target.classList.remove('active')
    }
}
return (
    <div 
    className="my"
    onClick={toggleHandler}
    ></div>
)

}

reactjs

1 个回答

  1. Best Answer

    当 state 或 props 发生变化时 ui 会发生变化，要更改元素的类作为实用性，您可以使用classnames库。要直接更改元素，您可以使用references，但您不应该滥用它，您可以在文档中阅读更多内容。一般来说，对于最原始的例子，我可以根据你的代码展示这样的代码

    const Burger = () => {

  const [isPressed, setPressed] = useState(false)

  const handleToggle = () => setPressed(!isPressed)

  return (
      <button 
        className={isPressed ? 'active': ''}
        onClick={toggleHandler}
      >Button</button>
  )
  
}

    • 2

相关问题