9

私の質問は主に、反応コンポーネントに関するドキュメントの次のステートメントを中心に展開しています。

cellEditor パラメータ

キーが押されたことをグリッドに通知するonKeyDownコールバック - コントロール キー イベント (タブ、矢印など) をグリッドに戻すのに役立ちます - ただし、グリッドはイベントが伝播するときに既にリッスンしているため、これを呼び出す必要はありません。これは、イベントの伝播を防止する場合にのみ必要です。

コンポーネントの反応バージョンに渡される小道具としてcellEditorパラメーターが存在することは理解していますが、ドキュメントで指定されているように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を持っており、タブだけでなく Enter キーを押したときにフォーカスを合わせて次のセルを選択しようとしています。私はすでに、次のように使用するrowRendererから必要なrowIndexおよびプロパティを抽出する機能を持っています:columnthis.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')} />
4

7 に答える 7

6

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

ルイス

于 2016-12-03T09:13:52.573 に答える
0

ag-grid のドキュメントから、「grid-api」が React コンポーネントの onGridRead() コールバックによって提供されることがわかりました。次の API 関数は、keyPress のイベントを登録するのに役立ちます。

addEventListener(eventType, listener)

次のようなものを試してください：

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

keyPressEventHandlerCallback=(e)=>{
    ...handler code here
}
于 2016-11-30T17:25:08.367 に答える
0

私がやったことは、afterGuiAttached (LargeTextCellEditor.prototype.afterGuiAttached の例) の行を変更して、タイムアウトから this.textarea.focus が呼び出されるようにすることです。（私はまだ問題の原因をさらに調べていませんでしたが、これは今のところうまくいきます）

LargeTextCellEditor.prototype.afterGuiAttached = function () {
        if (this.focusAfterAttached) {
            // this.textarea.focus();
            setTimeout(()=>this.textarea.focus());
        }
    };
于 2016-12-16T13:35:52.913 に答える