北京
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 或本地编辑器跟着做一遍，再独立重复几次，直到能熟练写出完整代码。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
