如何在ag-grid-react cellEditor组件中按"Enter"键按下事件传播？

Question

我的问题主要围绕反应组件的文档中的这个陈述:

cellEditor Params

onKeyDown回调告诉网格按下了一个键 - 用于将控制键事件(制表符,箭头等)传递回网格 - 但是你不需要调用它,因为网格在传播时已经在监听事件.只有在阻止事件传播时才需要这样做.

我知道cellEditor params存在,因为道具被传递给组件的反应版本,但我似乎无法找到如何附加到文档中指定的onKeyDown.在我的cellEditor的构造函数中,onKeyDown函数存在并匹配我的列定义中的onKeyDown指定cellEditorParams(如果存在).

constructor(props) {
  super(props);
  // console.log(typeof props.onKeyDown == 'function') => 'true'
}

但如果它只是存在于组件中,它永远不会达到

onKeyDown(event) {
  console.log('not reached');
}

如果我onKeyDown={this.props.onKeyDown}在输入中放入顶级包装div但它仍然没有捕获"Enter"按下它会被调用.

我试着收听包含我的自定义单元格编辑器的单元格

this.props.eGridCell.addEventListener('keyup', (event) => {
  console.log(event.keyCode === 13)
})

哪个捕获输入按下但是在我按下输入之前它似乎卸载然后我可以在场内捕获最终输入按下？我已经看到这种行为不起作用,所以我很困惑.

我目前有一个简单的单元格编辑器MyCellEditor,我试图进行焦点,并在按下输入时选择下一个单元格,只需选项卡.我已经提取的能力rowIndex和column性能我从rowRenderer的需要this.props.api.rowRenderer,然后我使用像:

this.props.api.rowRenderer.moveFocusToNextCell(rowIndex, column, false, false, true);

我的问题是从"Enter"按下默认情况下阻止事件传播的位置.

下面是我的单元格编辑器和用法.

import React from 'react';
import _ from 'lodash';

class MyCellEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
    };
  }

  getValue() {
    return this.state.value;
  }

  isPopup() {
    return false;
  }

  isCancelBeforeStart() {
    return false;
  }

  afterGuiAttached() {
    const eInput = this.input;
    eInput.focus();
    eInput.select();
  }

  onKeyDown(event) {
    // Never invoked!
  }

  onChangeListener = (e) => {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <input
        ref={(c) => { this.input = c; }}
        className="ag-cell-edit-input"
        type="text"
        value={this.state.value}
        onChange={this.onChangeListener} />
    );
  }
}
export default MyCellEditor;

列定义:

columnDefs = [{
    headerName: 'CustomColumn',
    field: 'customField',
    editable: true,
    cellClass: 'grid-align ag-grid-shop-order-text',
    sortable: false,
    cellEditorFramework: MyCellEditor,
    // Do I need cellEditorParams?
    cellEditorParams: {
      // onKeyDown: (event) => console.log('does not output')
    }
  },
  ...
}

阵营:

<AgGridReact
  columnDefs={columnDefs}
  rowData={this.props.rows}
  enableColResize="false"
  rowSelection="single"
  enableSorting="false"
  singleClickEdit="true"
  suppressMovableColumns="true"
  rowHeight="30"
  // onKeyDown also does nothing here
  onGridReady={this.onGridReady}
  onGridResize={() => console.log('grid resized')}
  onColumnResize={() => console.log('column resized')} />

Answer 1

@buddyp450，有完全相同的问题并在 ag-grid gitgub 下创建了一个问题，但是几分钟后找到了解决方法，您可以在我的示例中将关键代码更改为 13 并且完美运行:)

https://github.com/ceolter/ag-grid/issues/1300

export default class PATableCellEditor extends Component {
    constructor(props) {
        super(props);
        :
    }
    :
    afterGuiAttached() {
        // get ref from React component
        let eInput = this.refs.textField;
        :
        // Add a listener to 'keydown'
        let self = this;
        eInput.addEventListener('keydown', function (event) {
            self.myOnKeyDown(event)
        });
        :
    }
    :
    // Stop propagating 'left'/'right' keys
    myOnKeyDown(event) {
        let key = event.which || event.keyCode;
        if (key === 37 ||  // left
            key === 39) {  // right
            event.stopPropagation();
        }
    }
    :

路易斯