React 上输入银行卡的月份和年份

Question

我想创建输入字符串，用户可以在其中输入银行卡的到期日期。我希望输入字符串中的值看起来像“MM/YY”，并且在按下一个键后，每个后续值（M，然后 M，然后 Y，再一个 Y）更改为该键，该用户按下

我确实尝试过这段代码，但在更改字符 MM 和 YY 时遇到了困难

import React, { useState, useRef} from 'react';


function ExpireDate() {
    const [expireDate, setExpireDate] = useState([])

    const handleExpireDate = event => {
        const keyPressed = event.key

        if (!/\d/.test(keyPressed)) {
            if (keyPressed === 'Backspace') {
                setExpireDate((prev) => {
                    const newValue = [...prev]
                    newValue.pop()
                    
                    return newValue;
                })
            }

            return;
        
            
        }
        
        setExpireDate((prev) => {
            if (prev.length >=2) {
                return prev;
            }

            const newValue = [...prev]
            newValue.push(keyPressed)

            return newValue;
        })
    }


    const formattedExpireDate = (expireDate) => {
        console.log(`Expire date is: ${JSON.stringify(expireDate)}`)

        const month = new Array(2 - expireDate.length).fill('M').join('')
        const displayExpireDate = (expireDate.join('') + month)
            .replace(/(.{1,2})/, '$1/')
        

        return displayExpireDate;
    }

    return (
        <div>
            <div>
                <br />
                <input 
                className={`expire-date`}
                value={formattedExpireDate(expireDate)}
                onChange={() => {}}
                onKeyDown={handleExpireDate}
                size='5'
                placeholder=''
                />
            </div>
        </div>
    )
} 


export default ExpireDate;

Answer 1

如果输入框中显示的值与实际输入的不同，则应将实际输入和显示值分开存储，并根据实际输入导出显示值。

要从 0-4 个字符的字符串导出所需的格式，您可以

1. 将绳子切成两半，前半部分是月份，后半部分是年份
2. 将“MM”附加到月份，然后取前 2 个字符。
3. 将“YY”附加到年份，然后取前 2 个字符。
4. 用“/”连接两半

  const [expireDateInput, setExpireDateInput] = useState("");
  const expireDate = useMemo(() => {
    const mm = (expireDateInput.slice(0, 2) + "MM").slice(0, 2);
    const yy = (expireDateInput.slice(2) + "YY").slice(0, 2);
    return `${mm}/${yy}`;
  }, [expireDateInput]);

现在处理 keydown 事件

  const handleExpireDate: KeyboardEventHandler<HTMLInputElement> = (event) => {
    const keyPressed = event.key;
    if (keyPressed === "Backspace") {
      setExpireDateInput((prev) => prev.slice(0, -1));
    } else if (/^[0-9]$/.test(keyPressed)) {
      setExpireDateInput((prev) => (prev + keyPressed).slice(0, 4));
    }
  };

请注意，输入的字符数限制为 4 个字符，这样如果您输入的字符超过 4 个字符，就不会退格不可见的字符。

并结束

  return (
    <div>
      <input
        value={expireDate}
        onChange={() => {}}
        onKeyDown={handleExpireDate}
      ></input>
    </div>
  );

旁注： 如果执行不正确，操作输入字段通常是一个坏主意。想想复制和粘贴、删除与退格、文本选择等。有很多事情需要考虑。如果您可以提供帮助，那么在大多数情况下，带有验证的基本占位符就足够好了，而不是花哨的操作。