我正在尝试在两个类之间切换:深色模式和普通模式。
这是纯JavaScript的事件监听器。
const modeSwitch = document.querySelector('.mode-switch');
modeSwitch.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
modeSwitch.classList.toggle('active');
});
这是一个按钮,点击它可以在两种模式之间切换。我该如何在React中实现这个功能?
const [active, setActive] = useState(false)
const handleToggle = () => {
setActive(!active)
}
return (
<button className="mode-switch" title="Switch Theme" onClick={handleToggle}>
<svg className="moon" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" width="24" height="24" viewBox="0 0 24 24">
<defs></defs>
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</button>
)