在React中输入掩码卡号
Mask card number input in React
我正在学习React,并希望使用两个约束条件进行输入:
- 16数字
- ,
- 每隔四个空格。
import React, { Component } from 'react';
export default class CardNumberInput extends Component {
constructor() {
super();
this.state = { value: '' };
}
handleChange(event) {
React.findDOMNode(this.refs.cardInput).mask("0000 0000 0000 0000");
this.setState({ value: event.target.value });
}
render() {
let value = this.state.value;
return (
<div>
<label htmlFor="cardInput">Card Number: </label>
<input ref="cardInput" id="cardInput" onChange={this.handleChange} type="number" value={value} />
</div>
);
}
}
我不知道我是否做得对(使用refs),因为console.log(React.findDOMNode(this.refs.cardInput))返回null o_O
p.s. mask来自http://igorescobar.github.io/jQuery-Mask-Plugin/
掩码函数必须应用于jquery对象,而不是普通的dom元素,并且您还需要将这一行放在componentDidMount中。
componentDidMount: function () {
var $input_elem = $(React.findDOMNode(this.refs.cardInput));
// now you have a jquery object
$input_elem.mask("0000 0000 0000 0000", callback_options);
}
然而,这个插件的回调选项仍然需要与react生命周期方法集成。首先试着让它成为一个不受控制的组件(使用defaultValue而不是value),并检查它是否工作。
每次更改时都要渲染this.state.value,这会覆盖掩码。
掩码正在被渲染覆盖。
你需要移动mask()来渲染,以便它在写入dom之前屏蔽值。
计算数据:不要担心基于状态的预计算值-如果在render()中进行所有计算,则更容易确保UI的一致性。例如,如果你在state中有一个列表项数组,并且你想要将计数呈现为字符串,只需在render()方法中呈现this.state. listtitems .length + ' list items',而不是将其存储在state中。https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
我创建了一个包,它公开了一个输入组件,该组件根据它接收到的掩码显示一个掩码值。
掩码将改变,保持光标在正确的位置(即使你改变了输入中间的部分值,粘贴了一些字符,或者删除了一部分,即使掩码改变了)。
你可以在:
看到一个带有示例的演示https://lucasbasquerotto.github.io/react-masked-input您可以在第一个示例中看到一个类似于信用卡的掩码,并且您接收的值没有掩码(只有显示值)。只需将掩码更改为9999 9999 9999 9999
,它将适用于您的情况。
安装包:npm i react-hook-mask
你可以使用动态掩码,如果以后你想根据这个值来改变信用卡的掩码(因为有些信用卡有不同的掩码)。
我根据您的要求创建了一个示例演示(它使用遮罩9999 9999 9999 9999
):
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- 从右到左输入掩码
- 输入文本的掩码
- jQuery:在验证错误之后,我的输入掩码函数不会'Don’不要在野外工作
- 带有jQuery和屏蔽输入插件的手机掩码
- Jquery 输入掩码在正则表达式中不可见
- p:inputMask - 如何自定义掩码字符,例如强制输入以大写某些字母
- HTML 中的自定义输入掩码
- 具有两个不同用户输入的 jQuery 输入掩码
- 当输入字段中已有值时,在该字段中应用掩码
- j查询逗号分隔的电话号码掩码输入
- 引导输入掩码在动态文本框中不起作用?我能做什么
- 用点制作输入字段掩码
- JQuery输入12小时时间格式的掩码
- Jquery Validate-输入掩码冲突
- 如何使用jquery改变十进制的掩码输入格式
- 数字百分比的掩码输入
- jQuery掩码输入不改变值
- 掩码输入只允许十六进制颜色
- 在 JSF 中提交表单后,掩码输入不起作用