【React】Material-UIのText FieldでEnterキー押下時にイベント発火させる

Material-UIのText Fieldでフォームへの入力の途中でイベントが発火してしまうという問題があり、Enterキーを押したらイベントが発火するよう修正しました。

元のコード

const [id, setId] = useState([])

const handleIdChange = (event) => {
  setId(event.target.value)
  // 他の処理
}

return (
  <>
  {/* 略 */}
  <TextField
      fullWidth
      label="ID"
      variant="outlined"
      onChange={handleIdChange}
  />
  {/* 略 */}
)

Enterキーを押下でイベント発火するよう修正

const [id, setId] = useState([])

const handleIdChange = (event) => {
  if (event.key === 'Enter') {
    setId(event.target.value);
    // 他の処理
  }
}

return (
  <>
  {/* 略 */}
  <TextField
    fullWidth
    label="ID"
    variant="outlined"
    onKeyDown={handleIdChange}
  />
  {/* 略 */}
)