如何使用自动空格创建自定义输入字段以输入车牌号

Question

我需要开发用于输入车辆号码的输入字段，但我遇到的唯一问题是当按退格键时逻辑中断需要帮助..

React.useEffect(()=>{
if(cardNumber.length===2)
    setCardNumber(cardNumber+" ")
else if (cardNumber.length === 5) {
    setCardNumber(cardNumber+" ")
} else if (cardNumber.length === 8) {
    setCardNumber(cardNumber+" ")
}
}, [cardNumber]);

Answer 1

将您的逻辑从 useEffect 挂钩移至 onChange 并尝试执行以下操作：

const onChange = (event) => {
    const value = event.target.value;

    if ([2, 5, 8].includes(value.length)) {
      setCardNumber((prev) => {
        // this is only the case when we try to delete empty space
        if (prev.endsWith(" ")) {
          return value.slice(0, -1);
        } else {
          return value + " ";
        }
      });
    } else {
      setCardNumber(value);
    }
  };

有很多可能的解决方案，所以这只是其中之一。基本上这个想法是读取以前的状态并检查值是否以空结尾 space.

https://codesandbox.io/s/compassionate-grass-krhwxh

如何使用自动空格创建自定义输入字段以输入车牌号

How to create custom input field with autospaces for entering vehicle number plate

string

frontend

reactjs