Zenn
😊

[React Tips] form, etc...

2024/07/01に公開
JavaScript
オブジェクト指向
class
tech

formで囲むことでrequired属性付きinputの空文字判定とそのアラートまでネイティブがやってくれる

<form onSubmit={(e) => {
  console.log(e); // onSubmitはネイティブのバリデーションが通った場合のみ実行される
}}>
  <input required />

メリット

  • state管理しなくて良いのでメンテが良い
    • MUIに関しては defaultValue が使える

参考: https://zenn.dev/takaya39/articles/f02f7a29e17df1
Js公式 制約検証: https://developer.mozilla.org/ja/docs/Web/HTML/Constraint_validation
注意点: https://qiita.com/diescake/items/65ce4499ab8a70d029de

Discussion