如何在 React 中每 4 位数字后进行自动空格

问题描述

我正在尝试使用 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)
}

解决方法

Id 创建一个状态变量来保存抄送号码

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
};

这是一个demo

,

试试这个：

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]);

抱歉打字错误。