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.
更好的选择
我正在尝试使用 ReactJS 创建一个屏蔽输入组件。在
我确实不得不进行一些更改,因为看起来 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.
更好的选择