質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

Formでtypeにnumberを指定した時にonChangeを指定した時の警告回避方法

rimtem
ffffhhhh

総合スコア10

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1回答

0グッド

0クリップ

240閲覧

投稿2022/12/22 04:35

前提

Fomrで数字を入力しようとしています。
typeにnumberを指定するとonChangeで警告が出てきます。
typeにtextを指定すると警告がでません。
numberを指定した状態で、警告が出ない様にしたいです。
お力をお借りできればと思います。
よろしくお願いします。

実現したいこと

inputのtypeにnumberを指定した状態で、onChangeで警告が出ない様にしたいです。

発生している問題・エラーメッセージ

setAge(e.target.value)で警告がでてしまいます。

typescript

import React, {useState} from 'react' export default function Form() { const [name, setName] = useState("") const [mail, setMail] = useState("") const [age, setAge] = useState(0) const [form ,setForm] = useState({name:'no name', mail:'no mail', age:0}) const doChangeName = (e: React.ChangeEvent<HTMLInputElement>) => { setName(e.target.value) } const doChangeMail = (e: React.ChangeEvent<HTMLInputElement>) => { setMail(e.target.value) } const doChangeAge = (e: React.ChangeEvent<HTMLInputElement>) => { setAge(e.target.value)// ここで警告がでてしまいます。 } const doSubmit = (e: React.FormEvent<HTMLFormElement>) => { setForm({name: name, mail: mail, age: age}) e.preventDefault() } return ( <> <form onSubmit={doSubmit}> <div className={"form-group"}> <label>Name:</label> <input type="text" className={"form-control"} onChange={doChangeName} /> </div> <div className={"form-group"}> <label>Mail:</label> <input type="text" className={"form-control"} onChange={doChangeMail} /> </div> <div className={"form-group"}> <label>Age:</label> <input type="number" className={"form-control"} onChange={doChangeAge} /> </div> <input type="submit" className={"btn btn-primary"} value={"Click"}/> </form> </> ) }

試したこと

formについて検索等で調べましたが、解決できませんでした。

補足情報(FW/ツールのバージョンなど)

"dependencies": {
"@next/font": "13.0.7",
"@types/node": "18.11.17",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.9",
"eslint": "8.30.0",
"eslint-config-next": "13.0.7",
"next": "13.0.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.9.4"

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

setAge(e.target.value)で警告がでてしまいます。

はい、type="number"であろうが、e.target.value文字列です。

数値を取得したい場合、e.target.valueAsNumberから取得してください。

投稿2022/12/22 05:22

maisumakun

総合スコア142279

holly, ffffhhhh👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

rimtem

2022/12/26 03:53

ありがとうございます! valueAsNumberとしてする方法があるのですね! 勉強になりました!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。