今天要來介紹在 React 中如何建構最基本的 form。

重點可以歸納出這幾項：

1. 建立 state 變數，且與 input value 做綁定
2. 設定 onChange 事件
3. 設定 onSubmit 事件

直接 demo 囉，透過實作我想是最快的了解方式：
在當成 container 的 App.js 中輸入以下程式碼：

import React,{ useState } from 'react';
import './App.css';
import Form from './components/Form'

const App = () => {
  const [formDone, setFormDone] = useState(false);

  return (
    <div className="App">
      <Form setFormDone={setFormDone}/>
      {formDone ? <p>表單填答完成</p> : <p>請填表單</p>}
    </div>
  );
}

export default App;

這邊引入 Form component （待會會建立），並使用 useState 建立一個布林變數，來判斷表單是否完成，若表單送出成功則布林值為 true，下面也渲染一段文字判斷表單是否送出。

最後再把可以更改布林 state 的函式當成 props 傳下去給 Form component 使用。

接著就來實作 form 啦，在 src/component 資料夾底下創建 Form.js

import React,{ useState } from 'react'

const Form = (props) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        props.setFormDone(true);
    }
    return (
        <form onSubmit={handleSubmit}>
            <input name="email" type="text" onChange={(e) => setEmail(e.target.value)} value={email} />
            <input name="password" type="password" onChange={(e) => setPassword(e.target.value)} value={password} />
            <input type="submit" value="submit" />
        </form>
    )
}

export default Form;

這裡的 form 範例總共由三個元素組成：

1. email 輸入欄位
2. password 輸入欄位
3. submit button

特別注意的是我們建立了兩個 state 變數然後綁定在 input 的 value 上，再幫兩個 input 欄位加上 onChange 事件，onChange 事件中再放入改變 state 的函式，透過這樣的綁定可以使 state 的值與 input 欄位輸入的內容保持一至。

form 的預設行為是只要在 form 中點了button 或是 submit type 的 input ，就會觸發 form 的 onSubmit function。通常我們會希望能控制表單送出的行為，因此這裏寫了一個 handlesubmit 的 function 來處理onSubmit 事件。

const handleSubmit = (e) => {
    e.preventDefault();
    props.setFormDone(true);
 }

e.preventDefault 阻止了 form 的預設行為，使我們可以針對送出表單做進一步的客製化處理，範例中呼叫了由 App.js 傳來的 props ，更改了 formDone 的值為 true，代表已經成功送出表單。

也可以在這裡指定送出後要清空 input 的內容

const handleSubmit = (e) => {
    e.preventDefault();
    props.setFormDone(true);
    setEmail('');
    setPassword('');
}

送出表單前

送出表單後

最基本的表單操作就完成了，當然真實的情況還需要去判斷每個輸入欄位的值或是長度，甚至是一些特殊的規則。其實也存在許多套件讓我們可以更方便對 form 做處理，像是 formik 或是 redux-form。
form 在 web 或是 app 開發中佔有重要的地位，今天教了最基本的概念，之後就交給各位去往下鑽研啦，希望簡短的教學能讓原本沒有在 react 接觸過表單的人了解基本概念。