iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 14
1

今天要來介紹在 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('');
}

https://ithelp.ithome.com.tw/upload/images/20190918/20113277NFy5Se3zQS.png

送出表單前

https://ithelp.ithome.com.tw/upload/images/20190918/20113277PCMmKIf49y.png

送出表單後

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


上一篇
【Day 13】Conditional Rendering
下一篇
【Day15 路由神器 - React-router 】
系列文
React.js 從 【0】 到【1】推坑計畫 30

尚未有邦友留言

立即登入留言