如何在ag-grid-react cellEditor组件中防止“Enter”键按下事件传播？

Question

我的问题主要围绕文档w.r.t中的this statement。该反应成分：

cellEditor的PARAMS

的onkeydown回调告诉电网按下一个键 - 有用通过 控制键事件（标签，箭头等）回格 - 无论你做不是 需要调用这个，因为网格已经在监听它们传播的事件 。只有在您阻止事件 传播时才需要。

我明白，被传递到组件的反应版本道具存在cellEditor的PARAMS，但我似乎无法找到，因为在文档指定如何连接到的onkeydown。在我的cellEditor的构造函数中，onKeyDown函数存在，并与我的列定义（如果存在）内的cellEditorParams中指定的onKeyDown匹配。

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我试图使焦点和选择下一个单元格时除了只是选项卡按下输入。我已经在this.props.api.rowRenderer提取rowIndex和column性能我从rowRenderer需要，我再使用的能力等：

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

我的问题是在哪里防止事件传播默认情况下从“回车”按。

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

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-电网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(); 
     } 
    } 
    : 

路易斯

Answer 2

我从 “网格-API” 由onGridRead提供AG-网格的文档中发现（）回调的React组件。 以下api函数可以帮助您为keyPress注册一个事件。

addEventListener(eventType, listener) 

试着这么做：

onGridReady = (api)=>{ 
    api.addEventListener('keyPress', this.keyPressEventHandlerCallback); 
} 

keyPressEventHandlerCallback=(e)=>{ 
    ...handler code here 
} 

Answer 3

添加监听到网格容器捕捉键下。

onGridReady: {(event) => 
    event.api.gridPanel.eAllCellContainers.forEach(
     function (container) { 
      container.addEventListener('keydown', keyDownFunc); 
    }); 
} 
... 

定义侦听器。

function keyDownFunc(e) { 
    var key = event.which || event.keyCode; 
    if (e.keyCode == 13) { // enter = 13 
     // TODO: Handle event 
    } 
} 

Answer 4

意图是你捕捉“进入”按你cellRenderer的如下：

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

那么你会阻止从onKeyDownListener传播。这就是它在javascript中的工作原理。如果事情是发生在不同的做出反应，然后我不知道:(

Answer 5

遗憾的是没有提供答案实际上能够防止本机AG-电网导航事件的传播，尽管停止事件传播，立即传播，并防止

在一个未知的地方，对我而言，导致某些导航元素劫持了所有的东西，我知道这是因为我添加了一个控制台到源中的renderedCell.ts之后，添加了这个建议的侦听器线程，并得到了renderedCell的控制台了听者的控制台之前。

我最终去了分叉AG电网和扭捏的onkeydown的只是笨的办法：

case Constants.KEY_ENTER: 
    // this.onEnterKeyDown(); 
    // Whatever makes the clients happy amirite? 
    this.onTabKeyDown(); 
    break; 

Answer 6

我清盘做的是改变在afterGuiAttached（例如LargeTextCellEditor.prototype.afterGuiAttached）行，以便this.textarea.focus从超时调用。 （我没有进一步查找问题的根源还，但现在这个工作对我来说）

LargeTextCellEditor.prototype.afterGuiAttached = function() { 
     if (this.focusAfterAttached) { 
      // this.textarea.focus(); 
      setTimeout(()=>this.textarea.focus()); 
     } 
    }; 

Answer 7

从v13.2.0起，AG-​​电网具有suppressKeyboardEvent回调可以添加到列定义自定义默认的键盘导航。你可以找到这个文档和一个例子here in the official docs