[ Day 28 ] 实作一个 React.js 网站 4/5

接续上一篇的 Layout 相关元件实作後，今天要来开发 React.js 网站的功能是表单设计的部分，因为我们希望能在网站中使用该表单新增新的 Meetup 。
那就一起继续看下去吧～

新增 Form 元件

• 先在 meetups 资料夹内新增档案： NewMeetupForm.js 以及 NewMeetupForm.module.css ，并在 NewMeetupForm.module.css 中加入已经写好的范例预设样式。
  

  

  

• 在 NewMeetupForm.js 中引入 Card.js 样式元件和 NewMeetupForm.module.css 的 CSS Module ，并在返回的 JSX 中设定 <form> 标签以及要透过 props 传入的资料内容，最後在使用 preventDefault() 的方法来防止浏览器所有的预设行为。
  

备注： <label> 标签中的 htmlFor 是在 JSX 中取代原本 <label> 标签的 for 属性。这部分功能说明提供文章的传送门给大家参考唷！

• 在 NewMeetup.js 的页面中引入刚才建立好的 NewMeetupForm.js 元件。
  

这样我们就可以在 Add New Meetup 的页面看到如图所示的 Form 表单在其中：

使用 React Hooks 中的 useRef

• 在 NewMeetupForm.js 元件中引入 React Hooks 中的 useRef() 来抓取特定 DOM ，宣告好 DOM 变数之後将需要绑定的标签使用 ref 属性来做指定变数的绑定。
  

  

备注：关於 useRef 这个参数可以参考此文章，因为这系列的篇幅中并没有提到过此 React Hooks

• 在 submitHandler() 函式中将输入至 Form 表单中的值取出，并将其汇整成一个之後要上传新增的 Meetup 资料的一个物件。
  

透过上面程序码中最下面一行的 console.log(meetupData) 来检视我们是否成功抓到 Form 中的所有栏位资料：

1. 在画面中的 Form 内填写对应的资料，并点击下方的 Add Meetup 的按钮。
   

2. 打开开发者工具中的 Console 区块，检视是否有成功印出刚才输入的 Form 资料。
   

传送 POST Request

• 将 NewMeetupForm.js 元件中的 NewMeetupForm() Function 中原本用来检测用的 console.log 移除後，加入 props 属性并设定自定义资料名称，将 POST 请求所需要的资料传入到父层页面中。
  
• 在 NewMeetup.js 页面中新增一个 addMeetupHandle() 的 Function 并使用 fetch 来做非同步的 POST Request 传递新输入的 Meetup 资料。
  

备注：关於这边所使用的 API 是由 Firebase 所建立的，对於这部分的详细操作可以参考范例的影片教学内容。

虽然在 NewMeetup.js 页面上点击按钮 Add Meetup 之後画面不会有出现任何回馈（因为我们没有设定），不过去 Firebase 的资料库页面中我们就可以看到新增进资料库的 meetup 资料在里面了，如下图所示：

今天这篇实作应用到了 [ Day 08 ] 元件的资料传递 - Props 传递我们新增的 Meetup 资料和 [ Day 14 ] 佳评如潮的 React Hooks 中没有介绍到的 useRef() （拿来抓取指定 DOM 的 Hooks ）之外 ，还有前面实作中一直重复出现的 Function Component 和 JSX 等的概念。
备注：差点忘记附上的今日 GitHub Repository 连结

明天就会是实作 React.js 网站的最後一篇了，会将网站中更多的细节还有使用者反馈的内容做最後的收尾罗！

如果有任何问题都非常非常欢迎提出和指教～
那我们下篇见ʘ‿ʘ