症状

MaterialUIのTextFieldを実装し、Enterを押したときにページが更新されてしまう事象に遭遇しました。 onKeyDownでeventを見てみようにも、ページが更新されてしまうため、エラーメッセージ自体が消えてしまいます。

以下が該当のソースです。

textField.jsx

import React, { Fragment } from 'react';
import TextField from '@material-ui/core/TextField';

export const textField = () => {

  return(
          <Fragment>
            <form className={classes.root} noValidate autoComplete="off">
              <TextField
                id="outlined-basic"
                label="Email"
                variant="outlined"
                fullWidth
                value={SessionEmailState.user.email}
                onChange={handleChange}
                onKeyDown={(event) => {
                  if (event.key === 'Enter')
                  console.log("enterを押しました")
                }
                }
              />
            </form>
          </Fragment>
  )
}

解決方法

onKeyDownに以下を記述することで解決しました。おそらくですが、form要素のdefaulteventが原因だと思われます。

formのデフォルトの動作で、指定したURLにformの値を送信するもので、送信先のURLが指定されていなければ現在のURLに送信するようです。
結果的に、現在のURLがリロードしてしまうようです。

なので、以下のようにその動作をしないコードを記述して解決しました。別途Enterしたときにsubmitボタンの動作するようにする場合は、onKeyDownにsubmitを呼ぶようなfunctionを設定してやるとよさそうです。

textField.jsx

import React, { Fragment } from 'react';
import TextField from '@material-ui/core/TextField';

export const textField = () => {

  return(
          <Fragment>
            <form className={classes.root} noValidate autoComplete="off">
              <TextField
                id="outlined-basic"
                label="Email"
                variant="outlined"
                fullWidth
                value={SessionEmailState.user.email}
                onChange={handleChange}
                onKeyDown={(event) => {
                  if (event.key === 'Enter')
                    event.preventDefault();
                  console.log("enterを押しました")
　　　　　　　　　　//ここにsubmit用の処理を書くとEnterを押したときに動作してくれる
                }
                }
              />
            </form>
          </Fragment>
  )
}

参考