在React中输入掩码卡号

Mask card number input in React

本文关键字：掩码 输入 React      更新时间：2023-09-26

我正在学习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):

https://codesandbox.io/s/credit-card-mask-8f3w8?file=/src/index.js

相关文章：