ReactはInputタグの中でrequiredは使えますか？

Question

import  React from 'react'

export default class ProductForm extends React.Component {
  constructor(props) {
    super(props)
  }
  
  onSubmit = e => {
    e.preventDefault()
    const form = e.target.form
    const title = form.title.value
    const desc = form.desc.value
    const price = form.price.value
    this.props.add(title, desc, price)
  }

  render() {

    return (
      <div>
        <h1>ProductForm</h1>
        <form>
          <label>タイトル：</label>
          <input type="text" name="title" required/>
          <label>説明：</label>
          <input type="text" name="desc" required/>
          <label>価格</label>
          <input type="number" name="price" required/>
          <button type="submit" onClick={this.onSubmit}>追加</button>
        </form>
      </div>
    )
  }
}

上記のようにinputタグの中でrequiredを使用していますが、下記画像のような機能を付与できません。
Reactではバリデーションをこのようには使えないのでしょうか？
よろしくお願い致します。

Answer 1

Reactではバリデーションをこのようには使えないのでしょうか？

使えますが、submitのe.preventDefault()で無効にしてしまっています。

Comments

[maisumakun]

デフォルトではフォーム送信時にしかチェックが行われません。

[pokerStars]

e.preventDefault()で無効にしていたため使えなかったんですね！
理解できました！ありがとうございます><

[maisumakun]

reportValidity()やcheckValidity()など、JavaScriptからアクセスする手段も存在します。

[pokerStars]

そんなのもあるのですね！初めて知りました！！！
ちょっと調べてみます。ありがとうございます！