Ag网格过滤器因选择组件而失去焦点

时间:2019-05-07 12:04:46

标签: javascript ag-grid antd ag-grid-react

我使用ag-grid-react 19和ant设计组件。

我尝试使用ant design中的DatePicker为ag-grid列添加自定义日期过滤器。

但是当我单击下拉窗口时,过滤器失去焦点并关闭。

但是我希望下拉菜单在选择日期后保持打开状态。

图片:

https://ibb.co/XjyNNxJ

https://ibb.co/HXyG8QN

import * as React from 'react';
import {
  IFilter,
  IFilterParams,
  IDoesFilterPassParams
} from 'ag-grid-community';
import {DatePicker} from 'antd';

interface IState {
  startDate: Date;
  endDate: Date;
}

export class DateFilter extends React.Component<IFilterParams, IState>
  implements IFilter {
  state = {
    startDate: null,
    endDate: null
  };

  isFilterActive = () => {
    return !!this.state.startDate || !!this.state.endDate;
  };

  setModel = (model: { startDate: Date, endDate: Date }) => {
    if (!!model) {
      this.state.startDate = model.startDate;
      this.state.startDate = model.endDate;
    } else {
      this.state.startDate = null;
      this.state.startDate = null;
    }
  };

  getModel = () => {
    return this.state;
  };


  render() {
    return (
      <div className="ag-filter-body-wrapper">
        <div className="ag-filter-body" style={{padding: 4}}>
          <DatePicker/>
        </div>
      </div>
    );
  }

  doesFilterPass = (_: IDoesFilterPassParams): boolean => {
    return false;
  };
}

0 个答案:

没有答案