8、React 事件处理与组件样式化实战

React 事件处理与组件样式化实战

一、React 事件处理

在 React 中，处理事件是非常简单的。下面为你介绍两种常见事件的处理方式。

1. 点击事件处理

在 HomePage 组件中，我们可以实现一个 handleAskQuestionClick 函数来处理点击事件。具体步骤如下：
- 在 HomePage 组件的 return 语句之前添加如下代码：

const handleAskQuestionClick = () => {
  console.log('TODO - move to the AskPage');
};

当我们在运行的应用中点击 “Ask a question” 按钮时，控制台会输出相应的信息。

2. 输入框变化事件处理

我们还可以处理输入框的 change 事件，并与事件参数进行交互。以下是详细步骤：
1. 打开 Header.tsx 文件，在 JSX 的 input 元素中添加 change 事件监听器：

<input 
  type="text" 
  placeholder="Search..." 
  onChange={ha