您好:
我这边做AutoComplete的时候 用的antd的autocomplete.
我想请问下这个自定义单元格显示以后,是在单元格什么时候结束编辑的。
我这边遇到的情况是在autoComplete点击悬浮的选项后,直接调用了getEditorValue,deactivateEditor事件。好像就是直接结束了该单元格的编辑状态 导致自定义单元格关闭。好像是我定义的组件的事件执行之前 editorContext 这块元素就销毁了
我有什么办法控制这个关闭事件么。就是AutoComplete例子 这个例子里 ,怎样能让这个autoComplete一直显示,然后手动的去结束编辑状态 ,手动的让这个autoComplete变回正常的cell
- const AutoNode = ({ AllTag, context }: { AllTag: string[]; context: any }) => {
- const [tagList, setTagList] = useState<string[]>([]);
- const [tagValue, setTagValue] = useState('');
- const handleAutoCompleteChange = (st: any) => {
- const newTagList = AllTag.filter(t => t.indexOf(st) > -1);
- setTagList([...newTagList]);
- };
- const hanleAutoSelect = (s: any) => {
- // 无法触发
- // setTagValue(s);
- };
- const handleAutoChange = (c: any) => {
- // 无法触发
- // setTagValue(c);
- };
- const handleBlur = () => {
- console.log('handleBlur---', tagValue);
- console.log(context);
- context.sheet.startEdit(true);
- };
- useEffect(() => {
- setTagList([...taxReconTagList]);
- }, [taxReconTagList]);
- return (
- <AutoComplete
- // value={tagValue}
- style={{ height: 19, width: '100%' }}
- dataSource={tagList}
- onSearch={searchText => handleAutoCompleteChange(searchText)}
- onSelect={selectText => hanleAutoSelect(selectText)}
- onChange={changeText => handleAutoChange(changeText)}
- onBlur={handleBlur}
- />
- );
- };
复制代码
- class AutocompleteCellType extends GC.Spread.Sheets.CellTypes.Base {
- value: string;
- allTag: string[];
- constructor(tl: string[]) {
- super();
- this.value = '';
- this.allTag = [...tl];
- }
- }
- AutocompleteCellType.prototype.createEditorElement = function() {
- return document.createElement('div');
- };
- AutocompleteCellType.prototype.activateEditor = function(
- editorContext,
- cellStyle,
- cellRect,
- context,
- ) {
- ReactDOM.render(<AutoNode AllTag={this.allTag} context={context} />, editorContext);
- };
- AutocompleteCellType.prototype.deactivateEditor = function(editorContext, context) {
- console.log('deactivateEditor');
- GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.call(
- this,
- editorContext,
- context,
- );
- return;
- };
- AutocompleteCellType.prototype.setEditorValue = function(editorContext, value, context) {
- return;
- };
- AutocompleteCellType.prototype.getEditorValue = function(editorContext, context) {
- // context.sheet.endEdit(false)
- return 111;
- };
- AutocompleteCellType.prototype.updateEditor = function(
- editorContext,
- cellStyle,
- cellRect,
- context,
- ) {
- cellRect.y += 47;
- cellRect.x -= 2;
- cellRect.height = 100;
- if (editorContext) {
- editorContext.style.width = `${cellRect.width}px`;
- editorContext.style.height = '100px'; // `${cellRect.height}px`;
- }
- return cellRect;
- };
- AutocompleteCellType.prototype.isReservedKey = function(event, context) {
- if (context.isEditing && (event.keyCode === 40 || event.keyCode === 38)) {
- return true;
- }
- return false;
- };
- sheet.getRange(-1, 4, -1, 1).cellType(new AutocompleteCellType(taxReconTagList));
复制代码
|