React中onClick函数失效、主题无法切换的问题求助

你的onClick函数失效的核心原因是自定义的Button组件没有接收并传递onClick属性给内部的原生<button>元素。外部给Button传的onClick参数根本没被用到，自然不会触发任何逻辑，包括你加的console.log也不会执行。

修复步骤 #

• 给自定义Button组件的参数添加onClick属性
• 将这个onClick绑定到内部的原生<button>标签上

修改后的完整代码 #

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

const ThemeContext = createContext(null);

export default function MyApp() {
  const [theme, setTheme] = useState("dark");

  return (
    <ThemeContext.Provider value={theme}>
      <Form />

      <Button onClick={() => {
        console.log(theme);
        setTheme(theme === 'dark' ? 'light' : 'dark');
      }}>
        Toggle theme
      </Button>
    </ThemeContext.Provider>
  );
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = "panel-" + theme;
  return (
    <div className={className}>
      <h1>{title}</h1>
      {children}
    </div>
  );
}

// 修改这里：接收onClick属性并传递给原生button
function Button({ children, onClick }) {
  const theme = useContext(ThemeContext);
  const className = "button-" + theme;
  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  ) 
}

修改完成后，外部传入的onClick逻辑会被绑定到实际按钮上，点击时既能打印当前theme，也能正常切换主题。

内容的提问来源于stack exchange，提问作者Coder4Fun250