ReactJS 入門 -表單處理 - 筆記長也NotesHazuya

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>

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)