onKeyDown не отвечает

Question

Использование Material-UI Table У меня есть это:

<Table
 onKeyDown={event => console.log(event)}>
  <TableBody>
    ...
  </TableBody>
</Table>

Когда я щелкаю мышью по столу, а затем начинаю нажимать клавиши со стрелками вверх и вниз, ничего не попадает в консоль.Я попытался поставить onKeyDown на TableBody, а также на общего родителя div моего Приложения, но безуспешно.

help?

Answer 1

Итак, Material-UI Table не имеет onKeyDown реквизита, но его документы говорят, что:

Все остальные предоставленные свойства будут распространятьсяк корневому элементу (нативный элемент).

Если предположить, что "корневой элемент" - это table, то вам не хватает tabIndex проп.

Из связанной с SO записи :

Вам необходимо установить для свойства tabindex (например, tabindex="1") какое-то значение, чтобы оно могло определить, что эта таблица выбирается с клавиатуры.Это позволяет запускать событие клавиатуры.

Answer 2

Это, вероятно, потому что ваш стол не фокусируется.Поэтому onKeyDown никогда не запускается.

Вы можете добавить tabIndex, чтобы сделать его фокусируемым, но убедитесь, что у вас нет других фокусируемых элементов внутри, иначе они будут иметь приоритет.

<Table
 tabIndex='123'
 onKeyDown={event => console.log(event)}>
  <TableBody>
    ...
  </TableBody>
</Table>