Как получить доступ к обработчику onKeyDown значка клавиатуры DatePicker для материалов-пользовательского интерфейса? - PullRequest
Новая
       36

Как получить доступ к обработчику onKeyDown значка клавиатуры DatePicker для материалов-пользовательского интерфейса?

0 голосов
/ 13 ноября 2018

У меня есть таблица материалов со строками с компонентами material-ui-pickers datepicker в последнем столбце.enter image description here

Мне нужно добавить новую строку в таблицу при нажатии клавиши табуляции, когда фокус находится на значке клавиатуры DatePicker.Для этого, я думаю, необходим доступ к onKeyDown обработчику иконки клавиатуры DatePicker.

Как получить доступ к onKeyDown обработчику значка клавиатуры datepicker?

Я добавил выпуск в подборку материалов-пользовательского интерфейса git repoотносительно этого.

Я пытался добавить обработчик onKeyDown к компоненту DatePicker.Но это приведет к добавлению новой строки в обоих случаях: нажатие клавиши первой вкладки, когда фокус находится на строке даты, и нажатие клавиши второй вкладки, когда фокус находится на значке.

<DatePicker
    id={id}
    keyboard
    ...
    onKeyDown={(e, index) => {
        if (e.keyCode === 9 && this.props.itemData.rows.length - 1 === index) {
            console.log('Tab key pressed');
            this.props.addNewItemDataRow();
        }
    }}
/>

1 Ответ

0 голосов
/ 21 февраля 2019

Вы можете использовать KeyboardIconProps

<DatePicker
  KeyboardIconProps={{
    onKeyDown: () => console.log('hey') 
  }}
/>
...