Fork me on GitHub

範例


安裝

yarn add react-twzipcode

npm install --save react-twzipcode

語法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import TWzipcode from 'react-twzipcode';

class App extends Component {
  handleChange = (data) => {
    console.log(data);
  };

  render() {
    return (
      <div>
        <TWzipcode
          css={['form-control county-sel', 'form-control district-sel', 'form-control zipcode']}
          handleChangeCounty={this.handleChange}
          handleChangeDistrict={this.handleChange}
          handleChangeZipcode={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

參數

名稱預設值說明
countyFieldNamecounty縣市下拉選單欄位名稱
countyValue''縣市預設值
css['county-sel', 'district-sel', 'zipcode']表單元件樣式名稱。依序是「縣市」、「區域」、「郵遞區號」。
detectfalse是否開啟 Geolocation 偵測經緯度並轉換為行政區的功能
googleMapsKey''Google API 金鑰。若您達到 Geocoder 的每日限制用量,可透過購買來提高用量,同時需設置金鑰與打開 detect
districtFieldNamedistrict區域下拉選單欄位名稱
districtValue''區域預設值
zipcodeFieldNamezipcode郵遞區號文字框欄位名稱
zipcodeValue''郵遞區號預設值(優先權高於 countyValuedistrictValue
handleChangeCountynull選擇縣市後的 callback
handleChangeDistrictnull選擇鄉鎮市區後的 callback
handleChangeZipcodenull改變郵遞區號後的 callback
zipcodePlaceholder''郵遞區號欄位的 placeholder

特別感謝

jQuery 版作者 @essoduke 以及其專案 jQuery-TWzipcode


授權

MIT 授權。