我创建了一个简单的 React 项目,我在应用程序的抽屉中插入了一个 Material UI 开关,用于将应用程序的主题从深色切换为浅色。问题是有时当我加载应用程序并单击开关时,前几次它没有响应。当我继续单击时,它会更改主题,但行为会发生翻转:我进行切换的方式是在黑暗模式下检查/打开开关,在亮灯时关闭开关,但是现在,在没有响应之后前几次,它会改变行为,当它处于灯光模式时它会打开,反之亦然。
我切换开关的方式是这样的:
声明我使用了:
const [isDark, setDarkMode] = React.useState(true);
const [theme, setTheme] = React.useState(darkTheme);
切换主题功能:
const toggleTheme = () => {
setDarkMode((prev) => !prev);
setTheme(isDark ? darkTheme : lightTheme);
};
这是我的开关:
<Switch edge="start" checked={isDark} onChange={toggleTheme} />
编辑:如果我改为这样做,这个问题仍然存在:
setTheme((prev) => prev === darkTheme? lightTheme: darkTheme);
结果:(行为仍然翻转)
代码:
我的 CodeSandbox 链接:https://codesandbox.io/s/testing-karmapact-app-bghgp?file=/App.js
最佳答案
您需要反转主题切换 setTheme(isDark ? darkTheme : lightTheme);
如果当前是深色主题,那么你想将它们设置为浅色,反之亦然。
const toggleTheme = () => {
setDarkMode((prev) => !prev);
setTheme(isDark ? lightTheme : darkTheme);
};
关于reactjs - Material UI Switch 切换有错误,无法正确更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64074432/