Question

我有以下触发上下文菜单的代码，但是当我进行搜索并获得多个具有相同单词的结果时，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>
    );
};

Answer 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>
  );
};

反应上下文菜单 onClick 不适用于多个上下文菜单

1 个答案: