React Input Maskで電話番号入力フォームを作る

入力フォーマットにあわせてinputタグをカスタマイズするやつを試してみました。

やりたいこと

電話番号やカード番号といった特定のフォーマットがある値を、フォーマットに合わせた形で表示できるようにしようとしてました。

React Input Maskとは

text-maskのReact用パッケージです。以下のコマンドでインストールできます。

$ npm i -S react-text-mask

React Input Maskの使い方

マスクするフォーマットを指定すれば、inputタグとしてrenderされます。

import React from 'react'
import MaskedInput from 'react-text-mask'

export default () => (
  <div>
    <MaskedInput
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
    />
  </div>
)

実際に使うときは、こんな感じでstateに値をいれていくと良いでしょう。

import React from 'react';
import MaskedInput from 'react-text-mask';

class Phone extends React.Component {
  state = {
    phone: ''
  }
  handleChange = ({target}) => {
    const { name, value } = target;
    this.setState({
      [name]: value,
    });
  }
  render () {
    return (
      <MaskedInput
        mask={['+', /[1-9]/, /\d/, ' ', '(', /[1-9]/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
        className="form-control"
        name="phone"
        placeholder="Enter a phone number"
        guide={false}
        id="my-input-id"
        onBlur={() => {}}
        value={this.state.phone}
        onChange={this.handleChange}
      />
    )
  }
}

値を整形する

このやり方をした場合、stateに入るデータも+81 (90) 0000-0000のようになります。なのでCognitoなどに入れる場合は、以下のようにreplace処理をかけてから渡してやりましょう。

const formatPhoneNumber = (number) => {
  let val = number.replace(/ /g, '');
  val = val.replace(/-/g, '');
  val = val.replace(/\(/g, '');
  val = val.replace(/\)/g, '');
  return val;
};