如何阻止在 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}
      />
    );
  }}
/>