郵便番号から住所を自動入力するZipaddrxを任意のタイミングで動かす[Js,React]

郵便番号から住所を自動入力するZipaddrx

zipaddr.com

Jsを呼んでおけば勝手に動いてくれるんですがReactを使っていてonload以外のタイミングで動かしたくなったのでその時の対処法です。

任意のタイミングで初期化

Zip.x();

これだけ

ReactでZipaddrを使う方法

コンポーネントがマウントされたタイミング(componentDidUpdate)で Zip.x() を実行します。

~~~
  componentDidUpdate(prevProps, prevState) {
    Zip.x();
  },
~~~

これだけだとフォームの内容がstateに入っていないためフォームの内容を変更するとリセットされてしまいます。

住所が自動入力されたら住所をstateに入れる

郵便番号のフォーカスが外れたタイミングで都道府県、市区町村をstateに入れる関数を呼びます。

// View部分(郵便番号部分のみ)
<input onBlur={(e) => this.onBlurZipcode()} id="zip" onChange={(e) => this.props.onChangeValue('zipcode', e.target.value)} value={this.state.zipcode} />
// 郵便番号のフォーカスが外れたタイミングで都道府県、市区町村をstateに入れる
onBlurZipcode() {
  this.setState({ 
    pref: document.getElementById('pref').value,
    addr: document.getElementById('addr').value
  });
}

JavascriptのObjectをeachしたい

Javascriptでオブジェクトをeachで回したい時に
array同様にforEach使おうとしたらダメだった

ダメなパターン

obj.forEach(function (v,i) {
  console.log(i, ':', v);
});

普通にforを使うパターン

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, ':', obj[key]);
  }
}

モダンぽい書き方

Object.keys(obj).forEach(function (key) {
  console.log(key, ':', obj[key]);
});