ReactJS 入門－表單處理

2021-07-28 10:12:00 ReactJS

表單

如果你過去寫過其他處理表單的程式，在 react 當中大致上差不多，會透過綁定處理事件的方式來處裡表單。不過有部分差異的是在 value 上面的取得會透過 state 來管理。

Input 與 onChange

在 <input / > 元素當中，取得值的方式是透過 onChange 事件來取得。

首先，建立一個 LoginForm.js 的檔案，然後篩寫程式碼

import React,{useState} from "react";

const LoginForm=()=>{

    const [account,setAccount]=useState("");
    return (
        <>
        <input onChange={ (e)=>{ setAccount(e.target.value) } }></input>
        <p>Account : { account }</p>
        </>
    )

}
export default LoginForm;

onChange

input 元素是輸入匡的一種，使用 onChange 當輸入匡的輸入變動的時候就要處理。

e.target.value

e 是由 onChange 事件產生的物件，裡面會包含了產生變動的數值，透過這個來將輸入的數值綁到 state 上面。

default value 屬性

default value 可以賦予輸入匡一個預設值，修改一下程式碼

import React,{useState} from "react";

const LoginForm=()=>{

    const [account,setAccount]=useState("輸入你的帳號");
    return (
        <>
        <input defaultValue={account} onChange={ (e)=>{ setAccount(e.target.value) } }></input>
        <p>Account : { account }</p>
        </>
    )

}
export default LoginForm;

這樣在一打開畫面的時候，輸入匡跟底下的文字都會是“輸入你的帳號”。

但要注意如果你是要從 API 請求預設值的話，不要使用 default value 屬性，因為 default value 只會在渲染畫面時決定，所以只會被設定一次，從 API 拿回來的資料應該要以 value 屬性設定。

value 屬性

與 default value 最大不同的是 value 屬性會隨著輸入不同而一直變動，修改程式碼：

import React,{useState} from "react";

const LoginForm=()=>{

    const [account,setAccount]=useState("輸入你的帳號");
    return (
        <>
        <input defaultValue={account} value={account} onChange={ (e)=>{ setAccount(e.target.value) } }></input>
        <p>Account : { account }</p>
        </>
    )

}
export default LoginForm;

在這個例子當中，可以把 default value 拿掉，也會得到同樣的效果。

disabled 屬性

disabled 屬性可以停用這個輸入元素，讓使用者不能輸入，加上這個屬性看看：

import React,{useState} from "react";

const LoginForm=()=>{

    const [account,setAccount]=useState("輸入你的帳號");
    return (
        <>
        <input disabled={true} value={account} onChange={ (e)=>{ setAccount(e.target.value) } }></input>
        <p>Account : { account }</p>
        </>
    )

}
export default LoginForm;

發現沒辦法輸入了，也可以搭配 state 來做管理，當 state 的值 === 某個數值的時候，停用這個輸入項目。

import React,{useState} from "react";

const LoginForm=()=>{

    const [account,setAccount]=useState("輸入你的帳號");
    const [isSub, setIsSub] = useState(false);
    return (
        <>
        <input disabled={isSub} value={account} onChange={ (e)=>{ setAccount(e.target.value) } }></input>
        <p>Account : { account }</p>
        <button onClick={()=>{setIsSub(true)}}>提交</button>
        </>
    )

}
export default LoginForm;

其他元素

TextArea

與 input 一樣，只是 textarea 可輸入多行文字

 <textarea rows={5} value={account} onChange={(e)=>{setAccount(e.target.value)}}></textarea>

select

select 也是透過 value 以及 onChange 來取得數值，但是在 option 當中必須給定 value。如果指定的 value 不存在，則會以第一個選項為選擇。

import React,{useState} from "react";

const LoginForm=()=>{

    const [selected,setSelected]=useState("麵包");
    return (
        <>
        <select value={selected} onChange={(e)=>{setSelected(e.target.value)}}>
                <option value="麵包">麵包</option>
                <option value="泡麵">泡麵</option>
            </select>
            <div>
                目前select:{selected}
            </div>
        </>
    )

}
export default LoginForm;

也可以使用 selected 這個屬性來指定預設被選的選項。

<option selected value="泡麵">泡麵</option>

Radio input

radio 是以 checked 來判斷是否被選取，可以使用一個 state 來儲存目前被選取的項目

import React,{useState} from "react";

const LoginForm=()=>{

    const [isCheck,setIsCheck]=useState(123);
    return (
        <>
        <input type="radio" value="123" checked={isCheck===123} onChange={(e)=>{setIsCheck(123)}} />123<br/>
        <input type="radio" value="456" checked={isCheck===456} onChange={(e)=>{setIsCheck(456)}} />456<br/>
        <input type="radio" value="789" checked={isCheck===789} onChange={(e)=>{setIsCheck(789)}} />789
        </>
    )

}
export default LoginForm;

form 與 submit

在 form 以 onSubmit 綁定函式

 <form onSubmit={handleSubmit}>
      <input type="submit" value="Submit" />
 </form>