Help us understand the problem. What is going on with this article?

【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)}
/>

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

スクリーンショット 2020-02-09 23.05.36.png
郵便番号を入力すると、、、、、
スクリーンショット 2020-02-09 23.06.00.png

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

kibaa_go
インターンでReactとGoを書いています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした