我有以下触发上下文菜单的代码,但是当我进行搜索并获得多个具有相同单词的结果时,onClick 不起作用,就好像我得到一个带有搜索词的结果一样,onClick 工作正常。我也尝试为菜单项提供唯一 ID,但仍然无效。你能帮我找出问题出在哪里吗?
const getHighlightText = (text, keyword, value) => {
const startIndex = text.indexOf(keyword);
const entryId = value.entryid;
const entryParent = value.entryparent;
const entryType = value.entrytype;
return startIndex !== -1 ? (
<span>
{text.substring(0, startIndex)}
<span style={{ color: '#03a0ce' }}>
<ContextMenuTrigger id='HIGHLIGHTER_CONTEXT_MENU_1' holdToDisplay={1000}>
{text.substring(startIndex, startIndex + keyword.length)}
</ContextMenuTrigger>
<ContextMenu id='HIGHLIGHTER_CONTEXT_MENU_1' hideOnLeave={true}>
{(catalogType === 'M' || catalogType === 'L') ?
<MenuItem data={{event: 'CreateLibrary'}}
onClick={(event) => handleClickOnCatalogIcon(event, 'createLibrary')}
>
Create Library
</MenuItem> : null}
</ContextMenu>
</span>
{text.substring(startIndex + keyword.length)}
</span>
) : (
<span>
<ContextMenuTrigger id='HIGHLIGHTER_CONTEXT_MENU_2' holdToDisplay={1000}>
{text}
</ContextMenuTrigger>
<ContextMenu id='HIGHLIGHTER_CONTEXT_MENU_2' hideOnLeave={true}>
{(catalogType === 'M' || catalogType === 'L') ?
<MenuItem data={{event: 'CreateLibrary'}}
onClick={(event) => handleClickOnCatalogIcon(event, 'createLibrary')}
>
Create Library
</MenuItem> : null}
</ContextMenu>
</span>
);
};
答案 0 :(得分:1)
我认为问题可能出在上下文菜单 id 上,根据文档,它应该始终是唯一的。尝试向 id 添加一个随机字符串。
const getHighlightText = (text, keyword, value) => {
const startIndex = text.indexOf(keyword);
const entryId = value.entryid;
const entryParent = value.entryparent;
const entryType = value.entrytype;
const randomString1 = `${entryId}-${btoa(Math.random().toString()).substring(0,16)}`
const randomString2 = `${entryParent}-${btoa(Math.random().toString()).substring(0,16)}`
return startIndex !== -1 ? (
<span>
{text.substring(0, startIndex)}
<span style={{ color: '#03a0ce' }}>
<ContextMenuTrigger id={randomString1} holdToDisplay={1000}>
{text.substring(startIndex, startIndex + keyword.length)}
</ContextMenuTrigger>
<ContextMenu id={randomString1} hideOnLeave={true}>
{(catalogType === 'M' || catalogType === 'L') ?
<MenuItem data={{event: 'CreateLibrary'}}
onClick={(event) => handleClickOnCatalogIcon(event, 'createLibrary')}
>
Create Library
</MenuItem> : null}
</ContextMenu>
</span>
{text.substring(startIndex + keyword.length)}
</span>
) : (
<span>
<ContextMenuTrigger id={randomString2} holdToDisplay={1000}>
{text}
</ContextMenuTrigger>
<ContextMenu id={randomString2} hideOnLeave={true}>
{(catalogType === 'M' || catalogType === 'L') ?
<MenuItem data={{event: 'CreateLibrary'}}
onClick={(event) => handleClickOnCatalogIcon(event, 'createLibrary')}
>
Create Library
</MenuItem> : null}
</ContextMenu>
</span>
);
};