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

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

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