如果你過去寫過其他處理表單的程式,在 react 當中大致上差不多,會透過綁定處理事件的方式來處裡表單。不過有部分差異的是在 value 上面的取得會透過 state 來管理。
在 <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;
input 元素是輸入匡的一種,使用 onChange 當輸入匡的輸入變動的時候就要處理。
e 是由 onChange 事件產生的物件,裡面會包含了產生變動的數值,透過這個來將輸入的數值綁到 state 上面。
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 屬性設定。
與 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 屬性可以停用這個輸入元素,讓使用者不能輸入,加上這個屬性看看:
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;
與 input 一樣,只是 textarea 可輸入多行文字
<textarea rows={5} value={account} onChange={(e)=>{setAccount(e.target.value)}}></textarea>
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 是以 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 以 onSubmit 綁定函式
<form onSubmit={handleSubmit}>
<input type="submit" value="Submit" />
</form>
關於作者
粉絲專頁
文章分類