【React】 郵便番号から住所を自動入力

こんにちは。
今回はajaxzip3を使って、Reactでも簡単に住所の自動入力を実装する方法を紹介します。

住所自動入力

オンラインショッピングを利用するユーザーの約3分の2が購入を完了する前にカートを離脱していることが明らかとなっています。ECサイトのカート破棄率は平均約70%とされていて、カートの離脱を防ぎ、購入率を上げるためにもEFO（入力フォーム最適化）は重要です。

使い方

はじめにhtmlファイルのbody内にajaxzip3を読み込みます。

index.html

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

関数

AjaxZip3.zip2addr()の引数にinputタグのnameを指定し、郵便番号を入力すると、指定したフォームに対して都道府県、市町村、番地が自動で入力されます。
自動入力ではonChangeが発火しないため、stateが更新されず、フォームからapiにデータを渡す時に空判定されてしまう可能性があります。
そのため、指定したidのフォーム内に入力されている住所をdocument.getElementById('id').valueで取得してsetStateで更新してあげます。

Form.js

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {}
    };
  }

  handleChange = e => {
    const params = this.state.user;
    params[e.target.name] = e.target.value;
    this.setState({ user: params });
  };

  complementAddress = () => {
    const { AjaxZip3 } = window;
    AjaxZip3.zip2addr(
      'postCodeH',
      'postCodeF',
      'address1',
      'address2',
      'address3'
    );
  };

  onBlurZipcode = () => {
    this.setState({
      user: {
        ...this.state.user,
        address1: document.getElementById('address1').value,
        address2: document.getElementById('address2').value,
        address3: document.getElementById('address3').value
      }
    });
  };

  render() {
    return(
      <div>下記フォーム</div> 
    )  
  }
}
export default Form;

郵便番号を入力するフォーム

 <input
    name="postCodeH"
    size="3"
    maxLength="3"
    onChange={e => this.handleChange(e)}
/>
-
<input
    name="postCodeF"
    size="4"
    maxLength="4"
    onChange={e => this.handleChange(e)}
    onKeyUp={this.complementAddress}
    onBlur={this.onBlurZipcode}
/>

住所を入力するフォーム

<input
    name="address1"
    id="address1"
    onChange={e => this.handleChange(e)}
/>
<input
    name="address2"
    id="address2"
    onChange={e => this.handleChange(e)}
/>
<input
    name="address3"
    id="address3"
    onChange={e => this.handleChange(e)}
/>

動画をアップロードできないので

郵便番号を入力すると、、、、、

とても便利。
ありがとうございました。