在 React 中，组件内部的事件处理方式和普通的 HTML 元素有所不同。React 将所有事件处理方式都封装到 SyntheticEvent 中，统一进行处理，使得所有事件都可以以相同的方式来处理。
以下是几个基本的事件处理方式：
onClick
处理点击事件的方法是 onClick。可以将 onClick 方法绑定到组件的 DOM 元素上，当元素被点击时，onClick 方法会被调用。
import React from "react"; function handleClick() { console.log("Button clicked!"); } function Button() { return <button onClick={handleClick}>Click me!</button>; }
在上述代码中，handleClick 方法被绑定到按钮的 onClick 属性上，当按钮被点击时，handleClick 方法被调用，控制台会输出 "Button clicked!"。
onChange
处理输入框内容变化的方法是 onChange。可以将 onChange 方法绑定到输入框的 onChange 属性上，当输入框内容变化时，onChange 方法会被调用。
import React, { useState } from "react"; function TextInput() { const [text, setText] = useState(""); function handleTextChange(event) { setText(event.target.value); } return <input type="text" value={text} onChange={handleTextChange} />; }
在上述代码中，TextInput 组件内使用了 useState 来维护输入框的文本内容，handleTextChange 方法将输入框内容存储到 text 变量中，并通过 value 属性绑定到输入框上。
onSubmit
处理表单提交的方法是 onSubmit。可以将 onSubmit 方法绑定到表单的 onSubmit 属性上，当表单被提交时，onSubmit 方法会被调用。
import React, { useState } from "react"; function Form() { const [name, setName] = useState(""); const [age, setAge] = useState(""); function handleSubmit(event) { event.preventDefault(); console.log(`Name: ${name}, Age: ${age}`); } function handleNameChange(event) { setName(event.target.value); } function handleAgeChange(event) { setAge(event.target.value); } return ( <form onSubmit={handleSubmit}> <input type="text" value={name} onChange={handleNameChange} /> <input type="text" value={age} onChange={handleAgeChange} /> <button type="submit">Submit</button> </form> ); }
在上述代码中，handleSubmit 方法绑定到表单的 onSubmit 属性上，当表单被提交时，handleSubmit 方法会被调用。handleNameChange 和 handleAgeChange 方法分别用于更新表单中的姓名和年龄字段。在 handleSubmit 方法中，需要调用 event.preventDefault() 方法来阻止表单提交默认行为（即刷新页面）。
