ReactJS:屏蔽输入

ReactJS: mask input

我正在尝试使用 ReactJS 创建一个屏蔽输入组件。在 之后出现错误:对象不支持 属性 或方法 'mask'。

我确实不得不进行一些更改,因为看起来 post 可能有点过时,所以也许还有其他我不知道的需要更改的地方。

这是我的组件:

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="" />
    }
}

所以,我想我错过了 jquery-mask-plugin,我用

安装了它
npm install --save jquery-mask-plugin

所以我更改了这一行:

import $ from 'jquery-mask-plugin';

但是,现在我在这一行收到一个错误:

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

错误:预期的功能

我尝试在最后删除索引,但没有帮助。

jQuery 默认没有 mask 方法,所以我认为你没有包含 this 代码插件

我想创建自己的组件以避免安装第三方库,但由于我必须为此解决方案安装 jquery,所以不妨安装已经解决问题的 react-maskedinput对于 React,它是比 jquery.

更好的选择