React 中创建AutoComplete自定义单元格

Fiooona

您好:
我这边做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));