如何在 React 中每 4 位数字后制作自动空格

Question

我正在尝试使用 React 制作 credit/debit 卡片表格。我想在每 4 位数字后自动插入 space 并强制用户仅输入数字。比如输入1234567891234567就会变成withspaces 1234 5678 9123 4567。问题是当我按 backspace 时，无法删除 spaces，因为我使用了 onChange 事件。我是 React 的新手，可能需要不同的方法。我还可以用什么来使背面space正常工作以及如何禁止写字母（仅限数字）？

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

Answer 1

试试这个：

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

如有错别字，请见谅。

Answer 2

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

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

并设置输入的ccNumberonChange

<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

如何在 React 中每 4 位数字后制作自动空格

How to make autospace after every 4 digit in React

javascript

reactjs

react-hooks

react-forms