React 中的掩码卡号输入答案

【问题标题】：Mask card number input in ReactReact 中的掩码卡号输入
【发布时间】：2015-06-05 16:21:36
【问题描述】：

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

附言.mask 来自http://igorescobar.github.io/jQuery-Mask-Plugin/

【问题讨论】：

仅供参考，并非所有 PAN 都是 16 位数字
@AlexK。没关系。该输入仅用于学习目的。
我无法解释为什么 findDOMNode 会返回 null，但您应该可以使用 event.target 代替该参考。
非常好的问题，互联网上的答案很少。

标签： javascript reactjs

【解决方案1】：

mask函数必须作用于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）并检查它是否有效。

【讨论】：

【解决方案2】：

每次进行更改时都会渲染 this.state.value，这会覆盖掩码。

遮罩正在被渲染覆盖。

您需要移动 mask() 进行渲染，以便它在写入 dom 之前屏蔽值。

计算数据：不必担心根据状态预先计算值——如果在 render() 中进行所有计算，则更容易确保 UI 一致。例如，如果您有一个处于状态的列表项数组，并且您希望将计数呈现为字符串，只需在您的 render() 方法中呈现 this.state.listItems.length + 'list items' 而不是将其存储在状态中. https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

【讨论】：

【解决方案3】：

我创建了一个package，它公开了一个输入组件，该组件根据它接收到的掩码显示一个掩码值。

将光标保持在正确位置时，掩码会发生变化（即使您在输入的中间更改了部分值，粘贴了一些字符，或者删除了其中的一部分，即使掩码发生了变化）。

您可以在以下位置查看带有示例的演示：

https://lucasbasquerotto.github.io/react-masked-input

您可以在第一个示例中看到类似于信用卡的掩码，而您收到的值没有掩码（仅显示值）。只需将掩码更改为 9999 9999 9999 9999 即可。

安装包：npm i react-hook-mask

如果稍后您想根据值更改信用卡掩码，可以使用dynamic masks（因为某些信用卡具有不同的掩码）。

我根据您的要求创建了一个带有示例的演示（它使用掩码9999 9999 9999 9999）：

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

【讨论】：