AG网格自定义过滤器React组件在升级到版本22后首次打开时未调用afterGuiAttached

时间:2020-03-06 11:13:00

标签: ag-grid ag-grid-react

我们目前正在将AG-Grid从版本18升级到版本22,在此过程中,我注意到第一次打开自定义过滤器组件时并未调用方法afterGuiAttached 。我想知道该组件是否丢失了AG Grid 22中所需的某些东西,而我没有注意到这一点。或者如果这是新版本的AG Grid的问题。我已经在AG Grid版本18中测试了相同的代码,而这与相同的代码无关紧要。

interface IMultiSearchFilterState {
  searchText: string;
  hideFilter?: () => void;
  currentFilter: string;
}

export class MultiSearchFilter extends React.Component<IFilterParams, IMultiSearchFilterState> {
  private searchInput = React.createRef<HTMLInputElement>();

  public state: IMultiSearchFilterState = {
    searchText: '',
    currentFilter: ''
  };

  public isFilterActive = () => {
    return this.state.searchText !== '';
  };

  public getModel = (): IAgCollectionFilter | void => {
    if (!this.isFilterActive()) {
      return;
    }

    return { filterType: 'collection', filter: this.state.searchText.split(/[ ,]+/) };
  };

  public setModel = (model?: IAgCollectionFilter) => {
    const text = model ? model.filter.join(', ') : '';
    this.setState({ searchText: text, currentFilter: text }, () =>
      this.props.filterChangedCallback()
    );
  };

  public afterGuiAttached = (params: { hidePopup: () => void }) => {
    if (this.searchInput.current) {
      this.searchInput.current.focus();
    }
    this.setState(() => ({ hideFilter: params.hidePopup }));
  };

  private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;

    this.setState(() => ({ searchText: value }));
  };

  private handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { hideFilter } = this.state;
    if (!hideFilter) {
      return;
    }

    if (this.state.searchText === this.state.currentFilter) {
      hideFilter();
      return;
    }
    this.setState(
      ({ searchText, ...otherState }) => ({
        ...otherState,
        currentFilter: searchText
      }),
      () => {
        this.props.filterChangedCallback();
        hideFilter();
      }
    );
  };

  public render(): React.ReactElement {
    return (
      <form className='multi-search-filter' onSubmit={this.handleSubmit}>
        <input ref={this.searchInput} onChange={this.handleChange} value={this.state.searchText} />
        <button type='submit'>OK</button>
      </form>
    );
  }
}

0 个答案:

没有答案
相关问题