React 钩子形式只允许大于 0 的数字

Question

我正在使用 React Hook Form 来输入身高、体重和长度。 该值不能为 0 - 它必须至少为 1 或更多。 我尝试了不同的方法，例如：使用正则表达式、验证等模式。 但我无法弄清楚如何防止输入字段让用户输入“0”（仅作为第一个字符）。 我也尝试了 type="number" 和 min="1" 但是它没有改变任何东西。 任何想法将不胜感激。

                    <Input
                      {...form.register(`pallets.${index}.weight`, {
                        required: t('errors.emptyInput'),
                        pattern: {
                          value: /^[^1-9]/,
                          message: 'hello',
                        },
                        validate: (value) => {
                          return [/^[^1-9]/].every((pattern) => pattern.test(value))
                        },
                      })}
                      type='number'
                    />

在我看来， pattern并没有改变任何东西。 只有type= 'number'实际上会影响输入字段的工作方式。

Answer 1

<input
  type="number"
  {...register("test", {
    min: 1
  })}
/>

您可以从文档中查看详细用法。

Answer 2

您可以利用 react useState挂钩来实现此功能。

export default function App() {
  const [x, setX] = useState(null);
  const handleChange = e => {
    const value = e.target.value;
    if (!value || /^[1-9]\d*/.test(value))
      setX(e.target.value)
  }
  return (
    <div className="App">
      <input type="number" value={x} onChange={handleChange} />
    </div>
  );
}