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'));
名稱 | 預設值 | 說明 |
---|---|---|
countyFieldName | county | 縣市下拉選單欄位名稱 |
countyValue | '' | 縣市預設值 |
css | ['county-sel', 'district-sel', 'zipcode'] | 表單元件樣式名稱。依序是「縣市」、「區域」、「郵遞區號」。 |
detect | false | 是否開啟 Geolocation 偵測經緯度並轉換為行政區的功能 |
googleMapsKey | '' | Google API 金鑰。若您達到 Geocoder 的每日限制用量,可透過購買來提高用量,同時需設置金鑰與打開 detect 。 |
districtFieldName | district | 區域下拉選單欄位名稱 |
districtValue | '' | 區域預設值 |
zipcodeFieldName | zipcode | 郵遞區號文字框欄位名稱 |
zipcodeValue | '' | 郵遞區號預設值(優先權高於 countyValue 及 districtValue ) |
handleChangeCounty | null | 選擇縣市後的 callback |
handleChangeDistrict | null | 選擇鄉鎮市區後的 callback |
handleChangeZipcode | null | 改變郵遞區號後的 callback |
zipcodePlaceholder | '' | 郵遞區號欄位的 placeholder |
jQuery 版作者 @essoduke 以及其專案 jQuery-TWzipcode。
MIT 授權。