reactjs 使用状态对象对切换模式进行编码

au9on6nz  于 2022-11-22  发布在  React
关注(0)|答案(2)|浏览(117)

我写代码有个问题:我有一个州

const [theme, setTheme] = useState({ mode: "LIGHT" });

我想做一个切换功能,通过双击将模式切换到“暗”,然后将“暗”切换到“亮”。2我该怎么写呢?

import { createContext, useContext, useState } from "react";

const DARK = "DARK";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState({ mode: "LIGHT" });

  const toggleThemeMode = () => {
    setTheme();
    console.log(theme);
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleThemeMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

const useTheme = () => useContext(ThemeContext);

export { ThemeProvider, useTheme, DARK };
0md85ypi

0md85ypi1#

例如,包含onDoubleClick事件的示例,但如果您指的只是单击,则将事件名称更改为onClick
第一个

7fhtutme

7fhtutme2#

您可以只使用下列程式码:

const [theme, setTheme] = useState("LIGHT");

...

setTheme(theme === DARK ? "LIGHT" : DARK);

不过,我建议你至少也提供一个“光”值的常数,甚至更好:如果你想使用两个值(light和dark),你也可以将状态定义为布尔值。

相关问题