Reactでの入力値の最小値、最大値の変更

Question

Reactで以下のコンポーネントを作成しました。

            <InputBox>
              <CustomTypography>YMD</CustomTypography>
              <TextField
                size="small"
                name="ymd"
                type="date"
              />
            </InputBox>

date形式で入力するインプットボックスです。
現在、「年」のところが6桁入力可能になっているのですが、4桁に制限するにはどうすればよいでしょうか。htmlでは最小値と最大値を設定して実装できましたがReactでの書き方がわかりません。

Answer 1

React Hook Formを使用するのはどうですか。
registerの二番目の引数にminLengthとmaxLengthを指定すればバリデーションが設定できます。

https://react-hook-form.com/

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

Comments

[sasaki0628]

ありがとうございます。参考にいたします。