0

我正在尝试使用 React 制作信用卡/借记卡表格。我想在每 4 位数字后自动插入空格并仅强制用户输入数字。例如，如果输入 1234567891234567，它将变为带有空格 1234 5678 9123 4567。问题是当我按退格键时，空格不能被删除，因为我使用了 onChange 事件。我是 React 新手，可能需要不同的方法。我还能用什么来使退格正常工作以及如何禁止写字母（仅限数字）？

const [cardNumber, setCardNumber] = useState('')
    const handleChange = async (e) => {

    if (e.target.value.length === 4) {
        e.target.value += ' '
    } else if (e.target.value.length === 9) {
        e.target.value += ' '
    } else if (e.target.value.length === 14) {
        e.target.value += ' '
    }

    setCardNumber(e.target.value)
}
4

2 回答 2

1

Id 创建一个状态变量来保存 cc 编号

const [ccNumber, setCcNumber] = useState("");

并设置ccNumber onChange输入的

<input type="text" value={ccNumber} onChange={formatAndSetCcNumber} />

在 fn 里面formatAndSetCcNumber我会处理逻辑

const formatAndSetCcNumber = e => {
    const inputVal = e.target.value.replace(/ /g, ""); //remove all the empty spaces in the input
    let inputNumbersOnly = inputVal.replace(/\D/g, ""); // Get only digits

    if (inputNumbersOnly.length > 16) {
        //If entered value has a length greater than 16 then take only the first 16 digits
        inputNumbersOnly = inputNumbersOnly.substr(0, 16);
    }

   // Get nd array of 4 digits per an element EX: ["4242", "4242", ...]
    const splits = inputNumbersOnly.match(/.{1,4}/g);

    let spacedNumber = "";
    if (splits) {
        spacedNumber = splits.join(" "); // Join all the splits with an empty space
    }

    setCcNumber(spacedNumber); // Set the new CC number
};

这是一个演示

于 2020-12-26T09:36:37.450 回答
0

尝试这个：

const handleChange = async (e) => {
    setCardNumber(e.target.value)
}

useEffect(()=>{
    if(cardNumber.length===4)
        setcardNumber(cardNumber+" ")
    else if (cardNumber.length === 9) {
        setcardNumber(cardNumber+" ")
    } else if (cardNumber.length === 14) {
        setcardNumber(cardNumber+" ")
    }
}, [cardNumber]);

抱歉有任何错别字。

于 2020-12-26T08:14:45.627 回答