react typescript event.target.value がエラーになってしまう

TypeScriptで見積もり作成システムを作っています。

import
1import "./styles.css";
2
3type priceType = {
4  koumoku:string;
5  tanka: number;
6  suuryou: number;
7  tani: string;
8  goukei: number;
9}
10
11export default function App() {
12  const [koumokuText, setKoumokuText] = useState("");
13  const [tankaText, setTankaText] = useState<number>();
14  const [suuryouText, setSuuryouText] = useState("");
15  const [taniText, setTaniText] = useState("");
16  const [price, setPrice] = useState<Array<priceType>>([
17    {
18      koumoku: "企画費",
19      tanka: 1000 ,
20      suuryou: 3 ,
21      tani: "ページ",
22      goukei: 0
23    }
24  ]);
25
26  const onChangeKoumokuText = (event:React.ChangeEvent<HTMLInputElement>) => setKoumokuText(event.target.value);
27  const onChangeTankaText = (event:React.ChangeEvent<HTMLInputElement>) => setTankaText(event.target.value);
28  const onChangeSuuryouText = (event:React.ChangeEvent<HTMLInputElement>) => setSuuryouText(event.target.value);
29  const onChangeTaniText = (event:React.ChangeEvent<HTMLInputElement>) => setTaniText(event.target.value);
30  console.log("単価" + tankaText);
31  console.log("数量" + suuryouText);
32
33  const onClickAdd = () => {
34    const newPriceObject:priceType = {
35      koumoku: koumokuText,
36      tanka: tankaText,
37      suuryou: suuryouText,
38      tani: taniText,
39      goukei: tankaText * suuryouText
40    };
41
42    const newPrice = [...price, newPriceObject];
43    setPrice(newPrice);
44    console.log(price);
45
46    //inputのリセット
47    setKoumokuText("");
48    setTankaText();
49    setSuuryouText();
50    setTaniText("");
51  };
52
53  const total = price.reduce((p, x) => p + x.goukei, 0);
54  console.log(total);
55
56  return (
57    <>
58      <div className="input_erea">
59        <input
60          placeholder="項目"
61          value={koumokuText}
62          onChange={onChangeKoumokuText}
63        />
64        <input
65          type="number"
66          placeholder="単価"
67          value={tankaText}
68          onChange={onChangeTankaText}
69        />
70        <input
71          type="number"
72          placeholder="数量"
73          value={suuryouText}
74          onChange={onChangeSuuryouText}
75        />
76        <input
77          placeholder="単位"
78          value={taniText}
79          onChange={onChangeTaniText}
80        />
81        <button onClick={onClickAdd}>追加</button>
82      </div>
83
84      {price.map((s, index) => {
85        return (
86          <div key={index} className="mitumori_table">
87            <p>{s.koumoku}</p>
88            <p>{s.tanka}</p>
89            <p>{s.suuryou}</p>
90            <p>{s.tani}</p>
91            <p>{s.goukei}円</p>
92          </div>
93        );
94      })}
95      <div className="ddd">{total}</div>
96    </>
97  );
98}

const onChangeTankaText = (event:React.ChangeEvent<HTMLInputElement>) => setTankaText(event.target.value);

の「event.target.value」
部分にタイプスクリプトのエラー
Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number | undefined>
がでてしまうのですが、解決方法がわかりません。
stringだとエラーがでず、numberだとエラーになるようです

どなたか解決方法がわかりましたら
お教えいただけないでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

単価と数量は入力するinputのtypeがnumber なのでevent.target.valueではなく

event.target.valueAsNumber

で数値として受け取るのがよいかと思います。またそれに合わせて useState で作るstate変数名の末尾のTextを削除します。

具体的には以下のような修正になります。

diff
1 export default function App() {
2   const [koumokuText, setKoumokuText] = useState("");
3-  const [tankaText, setTankaText] = useState<number>();
4-  const [suuryouText, setSuuryouText] = useState("");
5+  const [tanka, setTanka] = useState(0);
6+  const [suuryou, setSuuryou] = useState(0);
7   const [taniText, setTaniText] = useState("");
8

diff
1   const onChangeKoumokuText = (event:React.ChangeEvent<HTMLInputElement>) => setKoumokuText(event.target.value);
2-  const onChangeTankaText = (event:React.ChangeEvent<HTMLInputElement>) => setTankaText(event.target.value);
3-  const onChangeSuuryouText = (event:React.ChangeEvent<HTMLInputElement>) => setSuuryouText(event.target.value);
4+  const onChangeTanka = (event:React.ChangeEvent<HTMLInputElement>) => setTanka(event.target.valueAsNumber);
5+  const onChangeSuuryou = (event:React.ChangeEvent<HTMLInputElement>) => setSuuryou(event.target.valueAsNumber);
6   const onChangeTaniText = (event:React.ChangeEvent<HTMLInputElement>) => setTaniText(event.target.value);
7-  console.log("単価" + tankaText);
8-  console.log("数量" + suuryouText);
9+  console.log("単価" + tanka);
10+  console.log("数量" + suuryou);
11 
12   const onClickAdd = () => {
13     const newPriceObject:priceType = {
14       koumoku: koumokuText,
15-      tanka: tankaText,
16-      suuryou: suuryouText,
17+      tanka,
18+      suuryou,
19       tani: taniText,
20-      goukei: tankaText * suuryouText
21+      goukei: tanka * suuryou
22     };

diff
1     //inputのリセット
2     setKoumokuText("");
3-    setTankaText();
4-    setSuuryouText();
5+    setTanka(0);
6+    setSuuryou(0);
7     setTaniText("");
8   };

diff
1         <input
2           type="number"
3           placeholder="単価"
4-          value={tankaText}
5-          onChange={onChangeTankaText}
6+          value={tanka}
7+          onChange={onChangeTanka}
8         />
9         <input
10           type="number"
11           placeholder="数量"
12-          value={suuryouText}
13-          onChange={onChangeSuuryouText}
14+          value={suuryou}
15+          onChange={onChangeSuuryou}
16         />
17         <input
18           placeholder="単位"

補足

input の prop onChange に設定する関数名は on始まりではなく、handle 始まりにするのが慣例としてよく見られます。これに倣うと上記の修正後に、さらに以下のように修正します。

diff
1-  const onChangeKoumokuText = (event:React.ChangeEvent<HTMLInputElement>) => setKoumokuText(event.target.value);
2-  const onChangeTanka = (event:React.ChangeEvent<HTMLInputElement>) => setTanka(event.target.valueAsNumber);
3-  const onChangeSuuryou = (event:React.ChangeEvent<HTMLInputElement>) => setSuuryou(event.target.valueAsNumber);
4-  const onChangeTaniText = (event:React.ChangeEvent<HTMLInputElement>) => setTaniText(event.target.value);
5+  const handleChangeKoumokuText = (event:React.ChangeEvent<HTMLInputElement>) => setKoumokuText(event.target.value);
6+  const handleChangeTanka = (event:React.ChangeEvent<HTMLInputElement>) => setTanka(event.target.valueAsNumber);
7+  const handleChangeSuuryou = (event:React.ChangeEvent<HTMLInputElement>) => setSuuryou(event.target.valueAsNumber);
8+  const handleChangeTaniText = (event:React.ChangeEvent<HTMLInputElement>) => setTaniText(event.target.value);

diff
1         <input
2           placeholder="項目"
3           value={koumokuText}
4-          onChange={onChangeKoumokuText}
5+          onChange={handleChangeKoumokuText}
6         />
7         <input
8           type="number"
9           placeholder="単価"
10           value={tanka}
11-          onChange={onChangeTanka}
12+          onChange={handleChangeTanka}
13         />
14         <input
15           type="number"
16           placeholder="数量"
17           value={suuryou}
18-          onChange={onChangeSuuryou}
19+          onChange={handleChangeSuuryou}
20         />
21         <input
22           placeholder="単位"
23           value={taniText}
24-          onChange={onChangeTaniText}
25+          onChange={handleChangeTaniText}
26         />