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

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

文字輸入-雙向綁定 input

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

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

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

綁定字串陣列

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

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

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

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;

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

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

Hahow

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

六角學院

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

Udemy

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