8、React 事件处理与组件样式化全解析

React 事件处理与组件样式化全解析

一、React 事件处理

在 React 开发中，事件处理是非常重要的一部分，它能让我们的应用与用户进行交互。下面我们来详细介绍两种常见的事件处理方式。

1. 点击事件处理

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

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

当我们在运行的应用中点击 “Ask a question” 按钮时，控制台会输出相应的信息。这表明在 React 中处理事件非常简单。

2. 输入框变化事件处理

处理输入框的 change 事件也是常见的需求。以下是具体步骤：
1. 打开 Header.tsx 文件，在 JSX 中的 input 元素上添加 change 事件监听器：

<input 
  type="text" 
  place