Question

学习React并尝试在单击组件中的元素时简单地在body标签上切换css类。我似乎无法找到一个如何做到这一点的好例子。

以下是使用Jquery的方法。

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

React的正确方法是什么？

Answer 1

假设<div id="test">something</div>文件中有index.html，您可以执行此类操作。

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>
    );
  }
}

工作示例here。

Answer 2

如果切换元素不是React的一部分，您可以使用纯javascript以旧方式执行此操作。

Add Framework Support

Answer 3

CheckBox.IsChecked

Answer 4

const myComponent = () => {
    [state, setState] = useState('red');
    const colorHandler = () => {
        setState(state === 'red' ? 'blue' : 'red');
    }
    return (<button onClick={colorHandler}>toggle</button>);
}

如何在React上切换css类

4 个答案: