Javascript 在React中输入掩码卡号

我正在学习React，并希望在两个约束条件下进行输入：

• 16个数字
• 在每四分之一后面加一个空格

import React，{Component}来自'React'；
导出默认类CardNumberInput扩展组件{
构造函数（）{
超级（）；
this.state={value:''}；
}
手变（活动）{
React.findDOMNode（本参考文献cardInput）.mask（“0000”）；
this.setState（{value:event.target.value}）；
}
render（）{
让value=this.state.value；
返回(
卡号：
);
}
}

我不知道我是否做对了（使用refs），因为console.log（React.findDOMNode（this.refs.cardInput））返回空o_o

---

p、 s..mask来自

每次进行更改时，您都会呈现此.state.value，这将覆盖mask

渲染将覆盖遮罩

您需要移动mask（）进行渲染，以便它在写入dom之前屏蔽该值

计算数据：不必担心基于状态预计算值-如果在render（）中进行所有计算，则更容易确保UI的一致性。例如，如果有一个列表项数组处于状态，并且希望将计数呈现为字符串，只需在render（）方法中呈现this.state.listItems.length+“list items”，而不是将其存储在状态。

---

掩码函数必须应用于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），并检查其是否工作。

FYI并非所有PAN都是16digits@AlexK. 没关系。该输入仅用于学习目的。我无法解释为什么

findDOMNode

返回空值，但您应该能够使用

event.target

代替该参考。这是一个非常好的问题，在互联网上几乎没有答案。