ReactJS：掩码输入

我想用ReactJS创建一个屏蔽的输入组件。正在关注Mask card number input in React我收到错误：对象不支持属性或方法'掩码'。ReactJS：掩码输入

我不得不做一些更改，因为它似乎后可能有点过时，所以也许还有其他事情我需要改变，我不知道。

这是我的组件：

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的面具插件，我与

npm install --save jquery-mask-plugin

安装于是我改变了这一行：

import $ from 'jquery-mask-plugin';

但是，现在我收到此错误消息：

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

错误：功能预计

我试图在最后移除该指数，但没有帮助。

来源

2017-04-05 roca323

似乎你在'componentDidMount'这里有个问题：'$ input_elem.input mask（“0000 0000 0000 0000”）;''input'和'mask'之间有空格 –

感谢Mike Driver。我的第一篇文章有一个错字。我只是修复它。我仍然得到我提到的相同的错误 – roca323

尝试'让$ input_elem = $（ReactDOM.findDOMNode（this.maskedInput））;'没有'[0]' –

我想创建自己的组件，以避免安装第三方库，但因为我将不得不安装jquery这个解决方案，不妨安装react-maskedinput已经解决了这个问题，这是React比jquery更好的选择。

来源

2017-04-10 16:20:07 roca323

的jQuery没有默认mask方法，所以我觉得你还没有包括this插件编写

来源

2017-04-05 17:05:20

ReactJS：掩码输入

回答

相关问题