zipcloud sample

sample of using zipcloud from react.

by kmdsbng

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://kmdsbng.github.io/zipcode_jp/api.js"></script>
<script>
  ZipCodeJp.setRootUrl('https://kmdsbng.github.io/zipcode_jp/')
</script>

複数住所に結びついてる郵便番号例: 4980000, 9070000, 8070042

<div id="container">
</div>

Babel + JSX

class Form extends React.Component {
  render() {
    var addresses = this.props.app.addresses.map(function(address, i) {
      return (
        <li key={i}>
          {JSON.stringify(address)}
        </li>
      );
    });
    
    var prefectures = this.props.app.prefectures.map(function(prefecture, i) {
      return (
        <li key={i}>
          {JSON.stringify(prefecture)}
        </li>
      );
    });
    
    var cities = this.props.app.cities.map(function(city, i) {
      return (
        <li key={i}>
          {JSON.stringify(city)}
        </li>
      );
    });
    
    var towns = this.props.app.towns.map(function(town, i) {
      return (
        <li key={i}>
          {JSON.stringify(town)}
        </li>
      );
    });
    
    return (
      <div>
        Input zip code: 
        <input type="text" size="10" value={this.props.app.zip_code} onChange={this.onChangeZipCode.bind(this)} />
        <button onClick={this.onSearchStart.bind(this)}>search address</button>
        
        <ol>
          {addresses}
        </ol>

        <button onClick={this.onLoadPrefectureStart.bind(this)}>load prefectures</button>
        
        <ol>
          {prefectures}
        </ol>

        Input prefecture jis code: (1〜47) 
        <input type="text" size="10" value={this.props.app.prefecture_jis_code} onChange={this.onChangePrefectureJisCode.bind(this)} />
        <button onClick={this.onLoadCityStart.bind(this)}>load cities</button>
        
        <ol>
          {cities}
        </ol>

        Input city jis code:
        <input type="text" size="10" value={this.props.app.city_jis_code} onChange={this.onChangeCityJisCode.bind(this)} />
        <button onClick={this.onLoadTownStart.bind(this)}>load towns</button>
        
        <ol>
          {towns}
        </ol>
      </div>
    );
  }
  
  onChangeZipCode(e) {
    this.props.app.updateZipCode(e.target.value);
  }
  
  onChangePrefectureJisCode(e) {
   ...