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