ReactJS -替换/过期日期卡

Question

输入4位数字时，需要进行替换，并在第2位和第3位数字之间设置斜杠。例如，我输入1225 -我需要得到12/25

changeInput(event) {
this.setState({ [event.target.name]: event.target.value.replace(//?/g, '').replace(/(d{2})/, '$1/') });
}
<input type="text" inputMode="numeric" id="cardDate" name="cardDate" value={this.state.cardDate} autoComplete="off" maxLength="5" placeholder="MMYY" onChange={this.changeInput.bind(this)} />

我写了一个替换代码，但是当我试图编辑输入字段时，有一个问题。怎么了?

Answer 1

使用Regex来做这个有点过分，有几种方法可以做到:首先，使用String.prototype:

String.prototype.insert = function (index, string) {
if (index > 0) {
return this.substring(0, index) + string + this.substr(index);
}

return string + this;
};

const string = "1234";
const substring = string.insert(2, "/");
console.log(substring) // "12/34"

你也可以通过数组来实现:

function replaceAt(string, index, toInsert) {
const substring = [...string];
substring.splice(2, 0, toInsert);
return substring.join("");
}
const string = "1234";
const replaced = replaceAt(string, 1, "/");
console.log(replaced);