如何在React上切換CSS類

Question

學習React並嘗試在單擊組件中的元素時在body標簽上切換一個CSS類。 我似乎找不到如何做的好例子。

這是我將使用Jquery做到的方式。

function initNav() {
$(".hmbWrapper").click(function() {
    $('body').toggleClass('mobileNavActive');
});
}

React中正確的方法是什么？

Answer 1

假設您在index.html文件中有一個<div id="test">something</div> ，則可以執行以下操作。

class App extends Component {
  toggleClass = () => {
    const oldClassName = document.getElementById('test').className;
    const newClassName = oldClassName === 'red' ? 'blue' : 'red'
    document.getElementById('test').className = newClassName
  }

  render() {
    return (
      <div>
        <p>
          click toggle to change colors below
        </p>
        <button onClick={this.toggleClass}>toggle</button>
      </div>
    );
  }
}

這里的工作示例。

Answer 2

如果toggled元素不是React的一部分，則可以使用純JavaScript以舊方式進行操作。

class MyComponent extends React.Component {
  toggle = () => document.body.classList.toggle('mobileNavActive');

  render() {
    return <button onClick={this.toggle}>toggle</button>;
  }
}

Answer 3

class App extends Component {
 toggleClass = (event) => {
   event.target.classList.toggle('selected')
}

render() {
 return (
  <div>
    <button onClick={this.toggleClass}>toggle</button>
  </div>
);
}}