Q&A
前提
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件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/12/26 03:53