ReactJS：屏蔽输入

Question

我正在尝试使用 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];

错误：预期的功能

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

Answer 1

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

Answer 2

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

更好的选择

ReactJS：屏蔽输入

ReactJS: mask input

jquery

maskedinput

reactjs