为什么React组件渲染时绑定的onClick事件会直接触发？

问题原因 #

你遇到的自动触发问题是事件绑定时的常见写法错误：

• ContextHookInfo组件内的按钮onClick属性绑定的是themeContext.themeSetter()，末尾的括号会导致JSX在组件渲染阶段立即执行这个状态更新函数，而不是将函数作为点击回调延迟到用户点击时触发。
• useState返回的状态更新函数执行后会触发组件重渲染，所以页面刷新组件首次渲染就会触发状态更新，看起来就像点击事件自动执行了。

修复方案 #

将onClick的赋值改为传入函数引用即可，如果你需要实现点击切换明暗主题的逻辑，可以按如下写法修改：

function ContextHookInfo() {
    const themeContext = React.useContext(HookContext);
    console.log("Theme:", themeContext);
    return (
        <div>
            <p style={themeContext.selectedTheme.style}>Hook theme color is {themeContext.selectedTheme.name}</p>
            {/* 去掉原有的执行括号，改为包裹切换逻辑的箭头函数，仅在点击时执行 */}
            <button onClick={() => {
                themeContext.themeSetter(prevTheme => 
                    prevTheme.name === 'light' ? UseContextTheme.dark : UseContextTheme.light
                )
            }}>Change hook theme</button>
        </div>
    );
}

如果不需要额外逻辑直接传函数引用，直接写onClick={themeContext.themeSetter}即可，注意不要加末尾的执行括号。

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