From b4d0fed5cb73ce9409d9e0c8ca5b921521701fd1 Mon Sep 17 00:00:00 2001
From: Yiqing Zhu <793831308@qq.com>
Date: Sat, 26 Mar 2022 17:00:21 +1100
Subject: [PATCH] Chap03 -> Handling events -> Handling an input change event

---
 QandA/frontend/src/Header.tsx | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/QandA/frontend/src/Header.tsx b/QandA/frontend/src/Header.tsx
index 80e2934..7f88f95 100644
--- a/QandA/frontend/src/Header.tsx
+++ b/QandA/frontend/src/Header.tsx
@@ -1,13 +1,23 @@
 import React from 'react';
 import { UserIcon } from './Icons';
 
-export const Header = () => (
-  <div>
-    <a href="./">Q & A</a>
-    <input type="text" placeholder="Search ..." />
-    <a href="./signin">
-      <UserIcon />
-      <span>Sign In</span>
-    </a>
-  </div>
-);
+export const Header = () => {
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.currentTarget.value);
+  };
+
+  return (
+    <div>
+      <a href="./">Q & A</a>
+      <input
+        type="text"
+        placeholder="Search ..."
+        onChange={handleSearchInputChange}
+      />
+      <a href="./signin">
+        <UserIcon />
+        <span>Sign In</span>
+      </a>
+    </div>
+  );
+};