Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

React表單處理-input、select、radio、checkbox、file

React

React 的表單,常會用 onChange 去做處理,以下是一些 input、select、radio、checkbox、file 的範例記錄。

文字輸入-雙向綁定 input

接收 value 和 onChange 事件,如 input 輸入的值變更,setState 會將 value 變更為新的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from 'react';

class Input extends Component {
state = {
text: ''
}
onChange = (e) => {
this.setState({
text: e.target.value
})
}
render() {
const { text } = this.state;
return (
<div>
<input type="text" value={text} onChange={this.onChange} />
<h1>{text}</h1>
</div>
);
}
}

export default Input;

value 傳入的一定會是字串,所以如想要的值為其他型別,要記得轉型,以下為 Number 型態,parseInt 將字串轉為 number

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from 'react';

class Input extends Component {
state = {
num: 0
}
onChange = (e) => {
this.setState({
num: parseInt(e.target.value, 10)
})
}
render() {
const { num } = this.state;
return (
<div>
<input type="number" value={num} onChange={this.onChange} />
<h1>{num}</h1>
</div>
);
}
}

export default Input;



下拉選單-Select

綁定字串陣列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { Component } from 'react';
const animals = ['dog', 'cat', 'mouse', 'rabbit', 'bird'];
class Select extends Component {
state = {
animal: animals[0]
}
onChange = (e) => {
this.setState({
animal: e.target.value
})
}
render() {
const { animal } = this.state;
return (
<div>
<select value={animal} onChange={this.onChange}>
{animals.map(item => (<option key={item}>{item}</option>))}
</select>
<h1>
{animal}
</h1>
</div>
);
}
}

export default Select;

綁定物件陣列 value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from 'react';
const animals = [
{label: '狗', value: 'dog' },
{label: '貓', value: 'cat' },
{label: '老鼠', value: 'mouse' },
{label: '兔子', value: 'rabbit' },
{label: '鳥', value: 'bird' }
];
class Select extends Component {
state = {
animalVal: animals[0].value
}
onChange = (e) => {
this.setState({
animalVal: e.target.value
})
}
render() {
const { animalVal } = this.state;
return (
<div>
<select value={animalVal} onChange={this.onChange}>
{animals.map(item => (<option key={item.label} value={item.value}>{item.label}</option>))}
</select>
<h1>
{animals.find(item => item.value === animalVal).label}
</h1>
</div>
);
}
}

export default Select;



單選與多選-radio、checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { Component } from 'react';

class RadioCheckbox extends Component {
state = {
gender: 'male',
animal: {
dog: false,
cat: false
}
}
changeGender = (e) => {
this.setState({
gender: e.target.value
})
}
changeAnimal = (e) => {
const key = e.target.value;
this.setState((state) => (
{
animal: {
...state.animal,
[key]: !state.animal[key]
}
}
))
}
render() {
const { gender, animal } = this.state;
return (
<div>
<div>
<h1>你的性別?</h1>
<input
type="radio"
id="male"
value="male"
checked={gender === 'male'}
onChange={this.changeGender}/>
<label htmlFor="male">男</label>
<input
type="radio"
id="female"
value="female"
checked={gender === 'female'}
onChange={this.changeGender}/>
<label htmlFor="female">女</label>
</div>
<div>
<h1>喜歡的動物?</h1>
<input
type="checkbox"
id="dog"
value="dog"
checked={animal.dog}
onChange={this.changeAnimal}/>
<label htmlFor="dog">狗</label>
<input
type="checkbox"
id="cat"
value="cat"
checked={animal.cat}
onChange={this.changeAnimal}/>
<label htmlFor="cat">貓</label>
</div>
<pre>{JSON.stringify(this.state, null, 2)}</pre>
</div>
);
}
}

export default RadioCheckbox;



檔案上傳與圖片預覽-file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from 'react';

class file extends Component {
state = {
img: ''
}
changeImg = (e) => {
// 取得第0筆檔案
const file = e.target.files[0];
// FileReader 讀取瀏覽器選中的檔案
const fileReader = new FileReader();
// 讀取完改變 img
fileReader.addEventListener('load', this.fileLoad);
// 將圖片繪出,轉換成 Base64 編碼
fileReader.readAsDataURL(file);
}
fileLoad = (e) => {
// 此處的 e 為 fileReader
this.setState({
img: e.target.result
})
}
render() {
return (
<div>
<input type="file" onChange={this.changeImg}/>
<img src={this.state.img} width="100%" />
</div>
);
}
}

export default file;


🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️