时间戳

首页 > 解决方案 > 如何访问 material-ui-pickers datepicker 键盘图标的 onKeyDown 处理程序？

reactjs - 如何访问 material-ui-pickers datepicker 键盘图标的 onKeyDown 处理程序？

问题描述

我有一个 Material 表，其中最后一列中包含material-ui-pickers datepicker组件的行。 在此处输入图像描述

当焦点位于日期选择器键盘图标上时，我需要在 Tab 键按下时向表中添加一个新行。为此，我认为需要访问onKeyDowndatepicker 键盘图标的处理程序。

如何访问onKeyDown日期选择器键盘图标的处理程序？

我在 material-ui-pickers git repo 中添加了一个关于此的问题。

我试图将onKeyDown处理程序添加到DatePicker组件中。但这会导致在两种情况下都添加一个新行，第一次按 Tab 键时焦点位于日期字符串上，第二次按 Tab 键时焦点位于图标上。

<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();
        }
    }}
/>

标签： reactjsdatepickermaterial-uionkeydown

解决方案

您可以使用KeyboardIconProps

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

推荐阅读