React 中屏蔽卡号输入

Question

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

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

Answer 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）并检查它是否有效。

Answer 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

Answer 3

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

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

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

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