React: 2つのinputであるdateとtimeを1つの文字列としてuseStateで管理したい。

Question

こちらの画像のようにuseStateを使って、inputの日付と時間を管理したいですが、入力しても第一希望しか変化せず、第2希望はカレンダーを選択しても日付と時間が出てきません。

以下のコードでどの部分を修正すればいいでしょうか？

import * as React from 'react'

const labels = {
  desired1: '第一希望',
  desired2: '第二希望',
}

const desires = {
  desired1: [''],
  desired2: [''],
}

const starting = {
  desired1: '',
  desired2: '',
}

const App = () => {
  const [appo, setAppo] = React.useState({ ...starting })

　　 const iValue = (key, val) => {
    setAppo(prev => {
      const next = {...prev}
      next[key] = val
      return next
    })
  }

　　return (
 　 <form>
    <table>
      <tbody>
          { Object.keys(labels).map(key => labels[key] && (
              <tr>
                <td>
                  {labels[key]}
                </td>
                <td>
                  {desires[key] && desires[key].map(desire => (
                    <div>
                      <input type='date'
                        id="date"
                        value={appo[key]}
                        onChange={() => iValue(key, (document.getElementById('date').value + document.getElementById('time').value))}
                      />
                      <input type='time'
                        id="time"
                        value={appo[key]}
                        onChange={() => iValue(key, (document.getElementById('date').value + document.getElementById('time').value))}
                      />
                      <label>{desire}</label>
                    </div>
                  ))}
                </td>
              </tr>
            ))
          }
      </tbody>
    </table>
  </form>
 )
}

Comments

[p19ljk]

これコードは正しいですか？
Appの中身がuseStateだけだったり、returnが外に飛び出してたり...

Answer 1

そもそものcontrolled componentの扱いが間違っています。
inputにvalueをもたせているのであれば、これはcontrolled componentです。
この場合、ユーザ操作によっては値の変化はありませんのでgetElementByIdで取得してvalueを見ても値は変更されていません。
値は必ずプログラム側で変更するというルールになりますので、onChangeの引数でeventが受け取れ、その中に変更後の値がセットされているので、それを元にstateを更新するように実装しなければなりません。
(stateを更新すればそれをvalueに持っているinputの表示も変更されるという仕組み)
おそらくonChangeが呼ばれても変更前の値が取得されているのでstateが変化していないように見えているのでしょう。

余談ですが、今の実装だと同(date, time)の要素が2つずつできてしまうのでこれは避けたほうがいいです。
そもそも、上記の修正を行えばidは不要になりますが。

Comments

[607842]

なるほど。そもそものreactのcontrolled componentの使い方が間違っているということですね。公式ドキュメントを読んで理解を深めたいと思います。

date, timeのstateを作って管理してみます！
ありがとうございます。