郵便番号から住所を自動入力するZipaddrxを任意のタイミングで動かす[Js,React]
郵便番号から住所を自動入力するZipaddrx
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 }); }