Question

我看到了the ag-grid-react repo has types，也看到了the ag-grid-react-example repo has examples。但是如何将两者放在一起并使用React和Types创建单元格编辑器？

我猜是这样的，但是我不能让TypeScript高兴：

class MyCellEditor implements ICellEditorReactComp {
  public getValue() {
    // return something
  }

  public render() {
    const { value } = this.props
    // return something rendering value
  }
}

Answer 1

我实现了ICellEditor并将ICellEditorParams用于属性定义。例如，此MyCellEditor示例来自其文档：

// function to act as a class
function MyCellEditor () {}

// gets called once before the renderer is used
MyCellEditor.prototype.init = function(params) {
    // create the cell
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
};

// gets called once when grid ready to insert the element
MyCellEditor.prototype.getGui = function() {
    return this.eInput;
};

// focus and select can be done after the gui is attached
MyCellEditor.prototype.afterGuiAttached = function() {
    this.eInput.focus();
    this.eInput.select();
};

// returns the new value after editing
MyCellEditor.prototype.getValue = function() {
    return this.eInput.value;
};

// any cleanup we need to be done here
MyCellEditor.prototype.destroy = function() {
    // but this example is simple, no cleanup, we could
    // even leave this method out as it's optional
};

// if true, then this editor will appear in a popup
MyCellEditor.prototype.isPopup = function() {
    // and we could leave this method out also, false is the default
    return false;
};

成为这个：

class MyCellEditor extends Component<ICellEditorParams,MyCellEditorState> implements ICellEditor {
  constructor(props: ICellEditorParams) {
    super(props);

    this.state = {
      value: this.props.eGridCell.innerText
    };
  }

  // returns the new value after editing
  getValue() {
    // Ag-Grid will display this array as a string, with elements separated by commas, by default
    return this.state.value;
  };

  // Not sure how to do afterGuiAttached()

  // if true, then this editor will appear in a popup
  isPopup() {
    return true;
  };

  render() {
    return (
      <div>
        hello
      </div>
    );
  }
}

如何使用React和TypeScript创建一个Ag-Grid单元格编辑器？

1 个答案: