読者です 読者をやめる 読者になる 読者になる

ノンカフェインであなたにやさしい

Rails,HTML,JavaScript,jQuery,PHP,CakePHPなど

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

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

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
  });
}