एजी-ग्रिड-प्रतिक्रिया सेल एडिटर घटक में "एंटर" कुंजी प्रेस के लिए ईवेंट प्रचार को कैसे रोकें?

Question

मेरा प्रश्न मुख्य रूप से दस्तावेज़ों में this statement घूमता है w.r.t. घटक प्रतिक्रिया:

cellEditor पैरामीटर

OnKeyDown कॉलबैक ग्रिड बताने के लिए एक कुंजी दबाने था - उपयोगी वापस ग्रिड से नियंत्रण महत्वपूर्ण घटनाओं (टैब, तीर आदि) पारित करने के लिए - लेकिन आप करते हैं को इसे कॉल करने की आवश्यकता नहीं है क्योंकि ग्रिड पहले से ही के रूप में ईवेंट के लिए सुन रहा है। यह केवल तभी जरूरी है जब आप ईवेंट प्रचार को रोक रहे हों।

मैं समझता हूँ कि cellEditor पैरामीटर मौजूद रूप में रंगमंच की सामग्री घटक के लिए प्रतिक्रिया संस्करण के लिए पारित किया जा रहा है, लेकिन मैं डॉक्स में विनिर्दिष्ट OnKeyDown को संलग्न करने के लिए कैसे पता नहीं कर पा रहे। मेरे सेल एडिटर के लिए मेरे कन्स्ट्रक्टर में ऑनकेडडाउन फ़ंक्शन मौजूद है और onKeyDown से मेल खाता है जो मेरी कॉलम परिभाषा (यदि यह मौजूद है) के अंदर cellEditorParams में निर्दिष्ट है।

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

लेकिन यह तक पहुँच कभी नहीं रहा है, तो यह सिर्फ घटक

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

यह अगर मैं अपने इनपुट के चारों ओर एक शीर्ष स्तर रैपिंग div के अंदर onKeyDown={this.props.onKeyDown} डाल लागू हो जाता है में मौजूद है लेकिन यह अभी भी पकड़ नहीं करता है "एंटर" दबाएं।

मैं वाले कक्ष को सुनने के अपने कस्टम सेल संपादक

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

कौन सा दर्ज प्रेस पर कब्जा करता है की कोशिश की, लेकिन यह जब दर्ज दबाया जाता है अनमाउंट करने के लिए इससे पहले कि मैं क्षेत्र के अंदर अंतिम दर्ज प्रेस पर कब्जा कर सकते हैं लगता है ? मैंने व्यवहार देखा है जहां यह भी काम नहीं करता है इसलिए मैं बहुत उलझन में हूं।

मेरे पास वर्तमान में एक साधारण सेल संपादक MyCellEditor है कि मैं फोकस करने की कोशिश कर रहा हूं और केवल टैब के अलावा दबाए जाने पर अगले सेल का चयन कर रहा हूं।

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

मेरे मुद्दा जहां से दर्ज करें "" डिफ़ॉल्ट रूप से ईवेंट प्रचार को रोकने के लिए है: मैं पहले से ही this.props.api.rowRenderer पर rowIndex और column गुण मैं rowRenderer से की जरूरत को निकालने के लिए जो मैं तो का उपयोग तरह की क्षमता है दबाएँ।

नीचे मेरा सेल संपादक और उपयोग है।

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, ठीक उसी समस्या थी और एजी ग्रिड 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 द्वारा प्रदान की गई से पाया() कॉलबैक प्रतिक्रिया घटक का। निम्न एपीआई फ़ंक्शन आपको कुंजीपटल के लिए एक ईवेंट पंजीकृत करने में मदद कर सकता है।

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); 
    }); 
} 
... 

श्रोता को परिभाषित करें।

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 से प्रचार रोका जा सके:

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

Answer 4

इरादा आप कीजिए आप में 'एंटर' दबाएँ कब्जा इस प्रकार है। इस तरह यह जावास्क्रिप्ट में काम करता है। यदि प्रतिक्रिया में कुछ अलग हो रहा है तो मुझे नहीं पता :(

Answer 5

दुर्भाग्य से प्रदान किए गए उत्तरों में से कोई भी वास्तव में देशी प्रसार-ग्रिड नेविगेशन कार्यक्रमों के प्रचार को रोकने में सक्षम नहीं है, घटना घटना, तत्काल प्रचार और रोकथाम को रोकने के बावजूद डिफ़ॉल्ट।

प्रतिक्रिया एजी-ग्रिड के साथ मुझे किसी अज्ञात क्षेत्र में कहीं भी नेविगेशन तत्व सबकुछ अपहरण कर रहे हैं। मुझे यह पता है क्योंकि मैंने श्रोताओं को जोड़ने के बाद स्रोत में renderedCell.ts पर एक कंसोल जोड़ा थ्रेड और श्रोता के कंसोल से पहले रेंडरसेल का कंसोल आउट हो गया।

मैं अंत में गया एजी ग्रिड forking और सुधार करने OnKeyDown की बस-बेवकूफ दृष्टिकोण:

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

Answer 6

क्या मैं कर रहा एक बदल रहा है समापन बाद में लाइनगुईएटेड (उदाहरण bigTextCellEditor.prototype.afterGuiAttached) ताकि यह .textarea.focus को टाइमआउट से बुलाया जाता है। (मैं अभी तक समस्या के स्रोत के लिए आगे देखो नहीं किया, लेकिन यह अब के लिए मेरे लिए काम करता)

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

Answer 7

v13.2.0 के बाद से, एजी ग्रिड एक suppressKeyboardEvent कॉलबैक कि करने के लिए स्तंभ परिभाषा में जोड़ा जा सकता है डिफ़ॉल्ट कीबोर्ड नेविगेशन को कस्टमाइज़ करें। आप प्रलेखन और उदाहरण here in the official docs