React 的事件处理看起来和原生 DOM 很像，但有几个关键差异需要留意。事件名采用驼峰命名而非全小写，而且你需要传递一个函数作为处理器，而不是字符串。这篇教程带你一步步实现一个常见的交互场景：点击按钮切换组件显示。

目标是做一个"Toggle Clock Component"按钮。点击后，界面在 Clock 组件（每秒更新）和 No Clock 组件之间切换。这需要 useState 钩子来管理状态，初始值设为布尔值 true。

打开网易新闻 查看精彩图片

第一步，在 App.js 中创建状态：

打开网易新闻 查看精彩图片

const [flag, setFlag] = useState(true);

然后在返回的 JSX 中添加按钮，绑定 onClick 事件：

Toggle Clock Component

此时会报错，因为 toggle 函数尚未定义。在组件内添加箭头函数：

打开网易新闻 查看精彩图片

const toggle = () => { console.log("Toggle Clicked!"); };

这是 React 事件处理的基础写法。接下来实现状态切换逻辑：调用 setFlag(!flag) 即可翻转 flag 的值。每次点击按钮，flag 在 true 和 false 之间切换，从而控制显示哪个组件。

建议先用 CodeSandbox 或本地编辑器跟着做一遍，再独立重复几次，直到能熟练写出完整代码。