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

Question

我有一个Material表，最后一列中的行包含material-ui-pickers datepicker个组件。

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

  

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

我为此添加了一个issue到material-ui-pickers git仓库中。

---

我试图将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();
        }
    }}
/>

Answer 1

您可以使用KeyboardIconProps

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