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;
};