ReactJS：マスク入力

Question

ReactJSを使用してマスクされた入力コンポーネントを作成しようとしています。 Mask card number input in Reactの後にエラーが表示されます：オブジェクトはプロパティまたはメソッド 'マスク'をサポートしていません。

投稿が少し古いかもしれないので、私はいくつかの変更を加えなければならなかったので、私が気付いていない変更が必要な他のものがあるかもしれません。

これは私のコンポーネントです：

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom' 
import $ from 'jquery'; 

export default class MaskedInput extends Component { 
    constructor(props) { 
     super(props); 
    } 

    componentDidMount() { 
     let $input_elem = $(ReactDOM.findDOMNode(this.maskedInput))[0]; 
     console.log($input_elem); 
//  // now you have a jquery object 
     $input_elem.mask("0000 0000 0000 0000"); 
    } 

    render() { 
     return <input ref={(input)=> {this.maskedInput = input; }} id="cardInput" onChange={this.props.handleChange} type="number" value="" /> 
    } 
} 

だから、私は私がだから私は、この行に変更

npm install --save jquery-mask-plugin 

でインストールjqueryのマスク・プラグイン、行方不明になったと思います。

を

import $ from 'jquery-mask-plugin'; 

これでエラーが表示されます：

let $input_elem = $(ReactDOM.findDOMNode(this.maskedInput))[0]; 

エラー：機能が

を期待し、私は最後に、インデックスを削除しようとしたが、それは助けにはなりませんでした。

Answer 1

コーディングするthisプラグインが含まれていないと思うが、私がしなければならないので、このソリューションのためにjqueryをインストールすると、既に問題を解決しているreact-maskedinputをインストールすることができ、jqueryよりもReactにとってはより良い選択です。

Answer 2

jQueryのは、デフォルトでmask方法を持っていないので、私はあなたが私がサードパーティのライブラリをインストールしないように私の独自のコンポーネントを作成したい