ReactJSTypeScript-动态React输入掩码

如何解决ReactJSTypeScript-动态React输入掩码

我有一个cpf / cnpj字段，我正在使用react输入掩码。我希望此掩码变得动态，因为cpf有11位数字，而cnpj有14位数字和另一种格式，但是我找不到任何东西来阐明这一过程。

<div className="col-sm-2">
            <label>Tipo da Empresa</label>
            <SelectForm
              name="type"
              id="type"
              placeholder="Selecione"
              options={[
                { value: 0,label: 'Física' },{ value: 1,label: 'Jurídica' },]}
            />
          </div>
          <div className="col-sm-4">
            <label>CPF / CNPJ</label>
            <InputMask
              name="cpfcnpj"
              mask="999.999.999-99"
            >
              <Input
                name="cpfcnpj"
                type="input"
                className="form-control"
                id="cpfcnpj"
              />
            </InputMask>
          </div>

解决方法

尝试将蒙版置于一种状态，然后假设您想使用SelectForm组件进行更改，则可以更新该状态

import React,{ useState } from 'react'

const [activeMask,setActiveMask] = useState('cpfmask')

...
<SelectForm 
  ...
  onChange={(e) => setActiveMask(e.target.value === 0 ?: 'cpfmask': 'cnpj')}
/>

<InputMask
 mask={activeMask}
/>