防止 [az] 在 reactJS 的输入类型 tel 上输入

Question

我有一个input type=tel组件，我试图提供一些额外的验证并防止 [az] 被输入并粘贴到输入上。 到目前为止，我已经使用了e.key和 prop onKeyDown ，我知道我可以阻止单个字符，但我找不到让 [az] 工作的方法。 我尝试用我在 SO 中找到的一个很好的例子，但我不知道如何得到它，尝试添加 regEx insted 但没有运气......

const PhoneNumberInput = ({value, onChange, valid, ...rest}) => {

const [phoneValid] = useState(["a", "b", "c"]); <--- I added in a state what I dont want to be inputed, tried with `/[a-z]$*` but I understood that it wouldnt work... 

  return (
    <Input
      className={classNames('form-control ', {
        'is-invalid': !valid,
      })}
      type="tel"
      value={value}
      onChange={onChange}
      onKeyDown={e => phoneValid.includes(e.key) && e.preventDefault()}
      valid={valid}
      {...rest}
    />
  );
};

我试过添加： const [phoneValid] = useState(["az"]); 但我后来明白道具“onKeyDown”不能那样工作......我该怎么做才能阻止输入[aA-zZ] || &&粘贴？

更新代码：

const PhoneNumberInput = ({value, onChange, valid, ...rest}) => {
  if(/(^$|^\d*$)/.test(value)) {
     console.log('entered value is number (or nothing i.e. empty input), do something.')
  } else {
    console.log('entered value is not a number - can be alphabet, space, special character, etc' )
  } <------ Im getting both states fired on console independent of number or letter

  return (
    <Input
      className={classNames('form-control ', {
        'is-invalid': !valid,
      })}
      type="tel"
      value={value}
      onChange={onChange}
      valid={valid}
      {...rest}
    />
   );
 };

Answer 1

if(/(^$|^\d*$)/.test(value)) {
 // entered value is number (or nothing i.e. empty input), do something.
} else {
 // entered value is not a number - can be alphabet, space, special character, etc 
}

Answer 2

找到了一个非常好的和干净的解决方案：

  const PhoneNumberInput = ({value, onChange, valid, ...rest}) => {
  value = value.replace(/[^0-9\+]/g, ''); <--- replace on the value 
  return (
    <Input
      className={classNames('form-control ', {
       'is-invalid': !valid,
      })}
      type="tel"
      value={value}
      onChange={onChange}
      valid={valid}
      {...rest}
    />
   );
 };