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

Question

У меня есть таблица материалов со строками с компонентами DatePicker Material -UI-Pickers в последнем столбце.

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

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

Я добавил проблему в репозиторий git-репозитариев материалов по этому поводу.

---

Я пытался добавить 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();
        }
    }}
/>

Answer 1

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

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

Answer 2

Для более поздних версийDatePicker(в данном случае v6.10.1) API DatePicker

Мы можем использоватьSlotProps:

      <DatePicker
  slotProps={{
    textField: {
      onKeyDown: (event) => console.log('Key pressed', event.key),
    },
  }}
/>