Material-UIのTextFieldにエンターキー押下時の処理を追加する

Material-UIのTextFieldでエンターキーを押したときに、フォーカスを外したり入力内容をstateに保存するactionをdispatchしたり等、何らかのイベントを発火したいことがあります。が、TextFieldのAPIにはキー押下時のイベントが用意されていないので、自分で追加する必要があります。

公式ドキュメントによると、Reactにはキー入力に関するイベントは、onKeyDown・onKeyPress・onKeyUpの3つが用意されており、それぞれJavaScriptのonkeydown・onkeypress・onkeyupに対応します。エンターキーの場合はonKeyDownでもonKeyPressでもいいのですが、onKeyPressを使った場合はkeyCodeが取得できないので(常に0になる)、注意が必要です。特別な理由が無い限りはonKeyDownを使う方がいいでしょう。

<TextField
  id="standard-basic"
  onKeyDown={e => {
    if (e.keyCode === 13) {
      // エンターキー押下時の処理
      console.log(e.target.value);
    }
  }}
/>

もしくはonKeyPressを使う場合は、

<TextField
  id="standard-basic"
  onKeyPress={e => {
    // e.keyCodeは常に0になる
    if (e.key === 'Enter') {
      // エンターキー押下時の処理
      console.log(e.target.value);
    }
  }}
/>

エンターキーが押された時にフォーカスを外す場合は次のコードのようになるでしょうか。

<TextField
  id="standard-basic"
  onKeyDown={e => {
    if (e.keyCode === 13) {
      e.target.blur();
    }
  }}
  onBlur={e => {
    // フォーカスが外れた時の処理
    console.log(e.target.value);
  }}
/>