javascript - 如何阻止在 React Hook Form 输入中输入 "e"和 "-"字符？

Question

我正在尝试在 react-hook-form 中设置电话号码输入图书馆。
我将输入类型设置为数字，但它仍然接受“e”和“-”字符。
我试图像这样阻止它:

<Controller
  name="phone"
  control={control}
  rules={{ required: true }}
  render={({ onChange, value, ref }) => (
    <Input
      ref={ref}
      type="number"
      label="phone"
      onChange={(e) =>
        /[^e]/.test(e.target.value) && onChange(e.target.value)
      }
      val={value}
    />

但它不能正常工作。
任何建议如何解决这个问题？

Answer 1

如果你想阻止某些键被按下，你可以隐藏 keydown检查失败后的事件:

<Input
  onKeyPress={(e) => {
    if (e.key === "e" || e.key === "-") {
      e.preventDefault();
    }
  }}
/>

但是，如果您允许所有键但在按下后验证它，您可以使用 pattern像这样的选项:

<Controller
  name="phone"
  control={control}
  rules={{ required: true, pattern: /^\d+$/ }}
  render={(props) => {
    const { onChange, value, ref } = props.field; // v7. use props if you're using v6
    const { error } = props.meta;

    return (
      <Input
        ref={ref}
        type="number"
        label="phone"
        onChange={onChange}
        val={value}
      />
    );
  }}
/>