Reactjs：state.length === 5 之后的输入掩码

Question

我想在输入 5 个这样的字符后添加 - 字符：

但我明白了：

我的代码：

interface IAddress {
  bairro: string;
  cep: string;
  cidade: string;
  complemento: string;
  rua: string;
  numero: string;
}
export default function App() {
  const [address, setAddress] = useState<IAddress>({
    bairro: "",
    cep: "",
    cidade: "",
    complemento: "",
    rua: "",
    numero: ""
  });
  const handlerCep = (e: any) => {
    const { value } = e.target;
    const cep = value.replace(/[^0-9]/g, "");
    setAddress({
      ...address,
      cep: address.cep.length === 5 ? `${cep}-` : cep
    });
  };
  return (
    <div className="App">
      <input
        type="tel"
        maxLength={9}
        value={address.cep}
        onChange={(e) => handlerCep(e)}
        //  onBlur={(ev) => findCep(ev)}
        required
        id="cep"
      />
    </div>
  );
}

我在某些时候吓坏了，我无法想象我该如何解决这个问题 现场示例：

代码沙箱：https://codesandbox.io/s/silly-sea-o4gd5?file=/src/App.tsx

Answer 1

您的代码中存在一些问题，首先您的正则表达式清除了线上的“-”符号：

// update regexp to allow '-'
const cep = value.replace(/[^0-9\-]/g, "")

second - 您正在检查状态中属性的长度，而不是 cep const 变量。状态尚未更新，因此您应该有兴趣从 onchange 事件中检查值的长度并使用计算值更新状态

setAddress({
      ...address,
      // use cep in length check instead of address.cep
      cep: cep.length === 5 ? `${cep}-` : cep
    });

解决上述问题后 - 您应该会看到输入已按预期更新。要考虑的第三个问题 - 删除字符的情况，我想它不会在当前代码中顺利运行。