質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1471閲覧

reactのMaterial-UIのDialogをエンターキーによって閉じたい

muno

総合スコア12

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/10/06 01:29

前提・実現したいこと

ReactでMaterial-UIのDialogを,Enterキーによって閉じたい

該当のソースコード

React

1<Dialog 2 title={t('view:editor')} 3 open={this.props.opened} 4 actions={actions} 5 onRequestClose={this.props.onDialogClose} 6> 7 Buttonなど 8</Dialog> 9 10現状では上記ようになっており,ボタンを押すとダイアログが閉じるようになっています. 11これをEnterキーを押すことによっても閉じたいと考えています. 12

試したこと

React

1<Dialog 2 onkeydown = {this.props.onDialogClose} 3>

のように追記してみましたが,Enterkeyを押しても何も起こりませんでした

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

ご質問に挙げられているコード

JSX

1<Dialog 2 onkeydown = {this.props.onDialogClose} 3>

の以下の部分

javascript

1onkeydown = {this.props.onDialogClose}

で、 onkeydown をキャメルケースに修正して、

javascript

1onKeyDown={this.props.onDialogClose}

のようにしてみるといかがでしょうか?


補足

私事で恐縮ですが、今現在関わっているReactによるSPA開発の業務で Material UIを使っており、Dialog も使いそうなので、ご質問にある

Material-UIのDialogを,Enterキーによって閉じたい

をどうすれば実現できるか私自身も興味があり、ちょっとスパイクがてらコードを書いてみました。

行ったことは、 Material UIのドキュメントにあるDialog のサンプルのうち、一番シンプルなSimple Dialogs を修正して、<Dialog>内の <ListItem> にマウスが乗った状態でReturnキーを押すと、そのアイテムが選ばれてDialogが閉じるようにしました。

修正後のソースコードを以下のレポジトリ

に上げておいたので、ご興味あれば

  • git clone git@github.com:jun68ykt/dialog-spike.git
  • cd dialog-spike
  • yarn install
  • yarn start

にて動かしてみてください。(create-react-app で作ったひな形をもとに作っています)

ListItem上にマウスがあるときに Returnキーを押すとDialogが閉じるように修正したコミットは以下です。

小一時間ぐらいで作った、あくまでスパイクですので、よりスマートなやり方があるかもしれませんが、参考になれば幸いです。

投稿2018/10/06 11:10

編集2018/10/06 14:32
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

muno

2018/10/09 03:48

ありがとうございます,解決いたしました.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問