时间戳

首页 > 解决方案 > 如何使用 React onClick 在 body 上切换一个类

javascript - 如何使用 React onClick 在 body 上切换一个类

问题描述

我有一个按钮，可以打开一个看起来像模态的 div。

单击此按钮时，我想在正文上添加一个类，然后单击关闭按钮，我想删除该类。

你将如何在带有useEffect/的 React 功能组件中做到这一点useState？

标签： javascriptreactjstypescript

解决方案

你可以this.setState在组件中这样使用

....
handleClick = () => {
  this.setState((state) => { 
    addClass: !state.addClass
  })
}

render () {
  const { addClass } = this.state

  return (
    <>
      <button onClick={this.handleClick}>Button</button>
      <div className={!!addClass && 'yourClassName'}>hello</div>
    <>
  )
}

在这样的功能中

function Example() {
  const [addClassValue, addClass] = useState(0);

  return (
    <div>
      <button onClick={() => addClass(!addClassValue)}>
        Click me
      </button>
      <div className={addClass ? 'yourClassName'}>hello</div>
    </div>
  )
}

但是你不需要类，因为 React 与组件一起工作，你可以显示你的模态

function Example() {
  const [addClassValue, addClass] = useState(false);

  return (
    <div>
      <button onClick={() => addClass(!addClassValue)}>
        Click me
      </button>
      // this Component will be only rendered if addClassValue is true
      {addClassValue && <ModalComponent />}
    </div>
  )
}

推荐阅读