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

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

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1838閲覧

ReactのFormの型をnumber型にしたのにstring型と判明されるときの対処法

21212121

総合スコア61

TypeScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/09/09 06:37

フォームの数字を型定義したいのですがstring型と判明されて困っております。
コードは下記の通りです。

import React, { useState } from 'react' import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; export interface TagFormProps { sendMoney: (text: string, money: number) => void; } const Form: React.FC<TagFormProps> = ({ sendMoney }) => { const [text, setText] = useState<string>(""); const [money, setMoney] = useState<number>(); const submitMoney = (text: string, money: number) => { if (text.trim() !== "") { sendMoney(text, money); setText(""); } else { alert("本文が入力されてません"); } }; return ( <div> <select> <option value="inc" >+</option> <option value="exp" >-</option> </select> <TextField type="text" placeholder="Add description" value={text} onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => { setText(event.target.value); }} /> <TextField type="number" placeholder="value" value={money} onChange={(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { const moneyStore: number = event.target.value setMoney(moneyStore); }} /> <Button variant="contained" onClick={() => money ? submitMoney(text, money) : null} color="primary" >登録</Button> </div> ) } export default Form;
<TextField type="number" placeholder="value" value={money} onChange={(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { const moneyStore: number = event.target.value setMoney(moneyStore); }} />

イメージ説明
こちらの方定義がどうも失敗してしまいます。
HooksのuseStateのジェネリクスを<number|styring>にすれば解決するのですが、今回数字の入力のフォーマットなのでどうしても型でstringを弾きたいのですが、、
解決策がわかる方いらっしゃいましたらご教授いただければ幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

typescript

1const moneyStore: number = Number(event.target.value);

投稿2020/09/09 06:47

miyabi_takatsuk

総合スコア9528

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

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

21212121

2020/09/09 06:52

ありがとうございました。 無事解決できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問