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

入力フォーマットにあわせてinputタグをカスタマイズするやつを試してみました。 やりたいこと 電話番号やカード番号といった特定のフォーマットがある値を、フォーマットに合わせた形で表示できるようにしようとしてました。 R […]

広告ここから
広告ここまで

目次

    入力フォーマットにあわせて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;
    };

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark