React 的表單,常會用 onChange 去做處理,以下是一些 input、select、radio、checkbox、file 的範例記錄。
接收 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) => { const file = e.target.files[0]; const fileReader = new FileReader(); fileReader.addEventListener('load', this.fileLoad); fileReader.readAsDataURL(file); } fileLoad = (e) => { 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;
|
🚀實體工作坊分享
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。