第八部分：第三节 - 事件处理：响应顾客的操作

用户与界面的互动是通过事件触发的，比如点击按钮、在输入框中输入文本、提交表单等。React 提供了一套跨浏览器的事件系统，让我们可以在组件中方便地处理这些事件。这就像点餐系统需要能够识别顾客的各种操作（按键、滑动屏幕）并作出响应。

在 React 中处理事件：

在 JSX 中，可以直接在元素上绑定事件处理函数，属性名遵循驼峰命名法 (CamelCase)，例如 onClick, onChange, onSubmit。属性值是一个函数引用，而不是函数调用的结果。

// src/components/EventHandlerExample.jsx
import React, { useState } from 'react';function EventHandlerExample() {const [message, setMessage] = useState('');const [inputValue, setInputValue] = useState('');// 事件处理函数：处理按钮点击const handleButtonClick = () => {alert('按钮被点击了!');};// 事件处理函数：处理输入框内容变化const handleInputChange = (event) => {// event 对象是 React 的合成事件对象，封装了原生浏览器事件console.log('输入框当前值:', event.target.value);setInputValue(event.target.value); // 使用 event.target.value 获取输入框的值};// 事件处理函数：处理表单提交const handleFormSubmit = (event) => {event.preventDefault(); // 阻止表单的默认提交行为 (刷新页面)setMessage(`提交的值: ${inputValue}`);console.log('表单已提交:', inputValue);};return (<div><h2>事件处理示例</h2>{/* 绑定点击事件 */}<button onClick={handleButtonClick}>点击我</button>{/* 绑定输入框内容变化事件 */}<inputtype="text"value={inputValue} // 使输入框成为受控组件onChange={handleInputChange}placeholder="请在此输入"/><p>输入框实时内容: {inputValue}</p>{/* 绑定表单提交事件 */}<form onSubmit={handleFormSubmit}><input type="text" name="formData" placeholder="表单输入" /><button type="submit">提交表单</button></form>{message && <p>{message}</p>} {/* 条件渲染显示消息 */}</div>);
}export default EventHandlerExample;

事件处理函数的命名规范：

通常推荐使用 handle 前缀加上事件类型作为事件处理函数的名称，例如 handleClick, handleChange, handleSubmit。

如何向事件处理函数传递参数：

有时候你需要在调用事件处理函数时传递额外的参数，例如在一个列表中，点击按钮需要知道是哪个列表项被点击了。可以通过匿名函数或箭头函数来传递参数。

// 假设在一个列表中渲染多个 Item 组件，每个 Item 组件有一个删除按钮
function Item({ item, onDelete }) {// 使用箭头函数传递参数 item.idconst handleDeleteClick = () => {onDelete(item.id); // 调用父组件传递下来的 onDelete 函数，并传入 item.id};return (<li>{item.name}<button onClick={handleDeleteClick}>删除</button>{/* 或者更简洁地直接在 JSX 中写箭头函数 */}{/* <button onClick={() => onDelete(item.id)}>删除</button> */}</li>);
}function ItemList({ items }) {const handleDeleteItem = (itemId) => {console.log('删除项目 ID:', itemId);// 在实际应用中，这里会更新 State 或调用 API 来删除项目};return (<ul>{items.map(item => (<Item key={item.id} item={item} onDelete={handleDeleteItem} />))}</ul>);
}

事件对象 (event 对象):

React 的事件处理函数会接收一个合成事件对象作为参数。这个对象是 React 封装了原生浏览器事件的跨浏览器兼容版本。它提供了与原生事件类似的方法和属性，比如 event.target (触发事件的 DOM 元素)、event.preventDefault() (阻止默认行为)、event.stopPropagation() (阻止事件冒泡) 等。

受控组件 (Controlled Components):

在处理表单输入框（<input>, <textarea>, <select>）时，通常会使用 State 来管理输入框的值。将输入框的 value 属性绑定到 State 变量，并通过 onChange 事件处理函数更新 State，这样的输入框称为受控组件。这意味着输入框的值完全由 React 的 State 控制。这就像点餐系统输入框里的文本，系统实时“记住”并管理着里面的每一个字。

// 这是一个受控输入框的例子 (上面 handleInputChange 的例子就是)
<inputtype="text"value={inputValue} // value 绑定 StateonChange={handleInputChange} // onChange 更新 State
/>

小结： React 提供了方便的事件处理机制，通过在 JSX 元素上使用驼峰命名的事件属性来绑定事件处理函数。可以使用箭头函数向事件处理函数传递额外参数。事件处理函数接收合成事件对象。对于表单输入，使用 State 和 onChange 构建受控组件是常见模式。

练习：

1. 在你之前的 LikeButton 组件中，为按钮添加一个点击事件处理函数，使其在每次点击时将点赞数加 1。
2. 创建一个新的组件 TextInputWithButton.jsx。
3. TextInputWithButton 组件包含一个输入框和一个按钮。使用 State 管理输入框的当前值，并在输入框内容变化时更新 State (受控组件)。
4. 为按钮添加点击事件处理函数，当按钮被点击时，将输入框的当前值打印到控制台。
5. 修改你的 MenuItem 组件，为其添加一个“添加到购物车”按钮。点击按钮时，打印出该菜品的名称。