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

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