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

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

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

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

TypeScript

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

Q&A

解決済

1回答

497閲覧

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

rimtem

総合スコア10

Next.js

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

TypeScript

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

0グッド

0クリップ

投稿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"

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

投稿2022/12/22 05:22

maisumakun

総合スコア145183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rimtem

2022/12/26 03:53

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問