我们目前正在将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>
);
}
}