Reactで先頭のゼロが消えない

Question

実現したいこと

inputで「01」と入力したとき「1」が表示される事を期待しています

発生している問題・分からないこと

inputで「01」と入力したとき「01」が表示されてしまう
intに変換してからsetValueしているので「01」ではなく「1」が代入され、inputの表示も「01」ではなく「1」になると思っていたが、「01」が表示されてしまう

エラーメッセージ

期待する結果が得られないだけなのでエラーメッセージは存在しない

該当のソースコード

import { useState } from 'react'

function App() {
  const [value, setValue] = useState<number>(123)

  return (
    <>
      <span>value is {value}</span>

      <div>
        <input type="number" value={value} onChange={(e) => {
          const _value = parseInt(e.target.value)
          console.log(_value)

          setValue(_value)
        }} />
      </div>
    </>
  )
}

export default App

参考画像

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

自分が書いたプログラムの意味を理解していて、上記プログラムで問題ないと思っているので、何が問題なのか理解できない状態です。

補足

特になし

Answer 1

useRefを使ってみるのはどうでしょうか。chromeの検証ツールから見るとinputタグのvalue属性は確かに最初stateのvalueの値が入っていますが、これは初回レンダリング以降静的な値として生成されているようで、inputの値を変えた時にsetValueでstateを書き換えた時にはspanタグしか際レンダリングされていないためにinputタグのvalue属性が入力された値で置き換わっていないようです。これをinputタグのvalue属性に反映させるためにuseRefを使用すると意図される動きになると思います。
追記：訂正：value属性は初期値を設定する属性で、上記で実際に置き換えているのはinputの入力内容です。

function App() {
  const [value, setValue] = useState<number>(123)

  const inputRef = useRef<HTMLInputElement>(null);　//useRefを使用

  return (
    <>
      <span>value is {value}</span>

      <div>
　　　　　　　　　　　　　　　//ref属性にuseRefを宣言したinputRefを指定
        <input type="number" value={value} ref={inputRef} onChange={(e) => {　
          const _value = parseFloat(e.target.value)
          console.log(_value)

　　　　　　　　　　　　　　　　　　//typescriptのためif分でnullを回避
　　　　　　　　　　　　　　　　　　//value属性は文字列型なのでString()で文字列に変換
          if(inputRef.current) {
            console.log(inputRef.current);
            inputRef.current.value = String(_value);
          }

          setValue(_value)
        }} />
      </div>
    </>
  )
}

useRefの詳しい使い方は調べていただければと思います。
間違っていたら申し訳ありません。

Comments

[hupyaginu]

回答有り難うございます
しかし、DOM側の値を操作しているようなコードに伺えます
DOM側を触るとReact側と状態が異なる状態になる気がするので良くない気がしています

Answer 2

<input type="number">を使用している場合、ユーザーが入力した値は文字列として扱われ、valueプロパティにセットされます。
ただし、valueプロパティが数値型の場合、その値は文字列ではなく数値として解釈され、表示されるため、先行するゼロが無視されます。

このため、valueを数値に変換した後に再度文字列としてinputに設定することで、期待する動作を実現することができます。

案1

import { useState } from 'react'

function App() {
  const [value, setValue] = useState<number>(123)

  return (
    <>
      <span>value is {value}</span>

      <div>
        <input type="number" value={value} onChange={(e) => {
          const _value = parseFloat(e.target.value);
          // 文字列にして値を渡す
          e.target.value = _value.toString();
          console.log(_value);

          setValue(_value)
        }} />
      </div>
    </>
  )
}

export default App

案2

import { useState } from 'react'

function App() {
  // 文字列に変更
  const [value, setValue] = useState<string>("123")

  return (
    <>
      <span>value is {value}</span>

      <div>
        <input type="number" value={value} onChange={(e) => {
          const _value = parseFloat(e.target.value);
          console.log(_value);

          // 文字列に変換してから値を渡す
          setValue(_value.toString());
        }} />
      </div>
    </>
  )
}

export default App

Comments

[hupyaginu]

回答ありがとうございます

案1はDOMを直接触っている気がするので良くない気がしています。
（React側で保持している状態とDOMが異なる状態になってしまうような気がしています。今回の質問主題自体がすでにそのような状態なのかもしれないですが…）

案2は確かに期待する結果が得られました。
しかし、なぜnumberだとだめでstringだとOKだったのか理解できていません。
valueは0から1への変化するので再レンダリングがされると思っていて、「01」ではなく「1」が表示されると期待します。

[lovam-nm]

この問題は、<input type="number">の挙動に起因しています。
<input type="number">は入力された値を文字列として扱いますが、valueに渡された数値を数値として解釈し、その結果として表示します。そのため、先行するゼロを無視してしまうということが起こります。

参考：
https://plustrick.com/input_type_number/
https://note.com/takamoso/n/n79df2d8f16bf
https://scrapbox.io/fsubal/input%5Btype=number%5D_%E3%81%AE%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88%E3%82%92%E5%AE%89%E6%98%93%E3%81%AB_number_%E5%9E%8B%E3%81%AB%E3%81%97%E3%81%AA%E3%81%84

Answer 3

このような修正はどうでしょう？

       <div>
-        <input type="number" value={value} onChange={(e) => {
+        <input value={value} onChange={(e) => {
           const _value = parseFloat(e.target.value)
           console.log(_value)
 
-          setValue(_value)
+          setValue(isNaN(_value) ? 0 : _value)
         }} />
       </div>

この修正によって、以下のようになります。

• input を空欄にしようとすると 0 が表示されることになりますが、0 の後ろにカーソルがあるときに 1 を入力すると、input には 01 ではなく1 と表示されます。

• また、parseFloat の仕様によって半角数字ではないキーを打っても input の表示には反映されません。