Javascript 我如何制作一个像Geeksforgeks这样的下拉菜单

我有一个小webapp，当你将鼠标悬停在单词“collective”上时，我需要显示一个下拉菜单，但菜单应该一直在那里，直到我单击菜单中的一个单词或将鼠标悬停在菜单外，但当我将鼠标从单词“collective”上移出时，它会立即消失我甚至无法将鼠标指针移动到任何下拉菜单项。我希望我的下拉菜单与中的一样

我的沙箱到目前为止

要使应用程序正常工作，您必须在输入框中键入“集体”，单击“分析”，然后将显示一个进度条，单击进度条中的蓝线，在单词“集体”下显示一条下划线，然后将鼠标悬停在“集体”字上，并显示一个下拉菜单

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { Content, Dropdown, Label, Progress, Button, Box } from "rbx";

import "rbx/index.css";

function App() {
  const [serverResponse, setServerResponse] = useState(null);
  const [text, setText] = useState([]);
  const [loading, setLoading] = useState(false);
  const [modifiedText, setModifiedText] = useState(null);
  const [selectedSentiment, setSentiment] = useState(null);
  const [dropdownContent, setDropdownContent] = useState([]);
  const [isCorrected, setIsCorrected] = useState(false);
  const [displayDrop, setDisplayDrop] = useState(false);
  useEffect(() => {
    if (serverResponse && selectedSentiment) {
      const newText = Object.entries(serverResponse[selectedSentiment]).map(
        ([word, recommendations]) => {
          const parts = text[0].split(word);
          const newText = [];
          parts.forEach((part, index) => {
            newText.push(part);
            if (index !== parts.length - 1) {
              newText.push(
                <u
                  className="dropbtn"
                  data-replaces={word}
                  onMouseOver={() => {
                    setDropdownContent(recommendations);
                    setDisplayDrop(true);
                  }}
                  onMouseOut={() => setDisplayDrop(false)}
                >
                  {word}
                </u>
              );
            }
          });

          return newText;
        }
      );

      setModifiedText(newText.flat());
    }
  }, [serverResponse, text, selectedSentiment]);

  const handleAnalysis = () => {
    setLoading(true);

    setTimeout(() => {
      setLoading(false);
      setServerResponse({ joy: { collective: ["inner", "constant"] } });
    }, 1500);
  };

  const handleTextChange = event => {
    setText([event.target.innerText]);
  };

  const replaceText = wordToReplaceWith => {
    const replacedWord = Object.entries(serverResponse[selectedSentiment]).find(
      ([word, recommendations]) => recommendations.includes(wordToReplaceWith)
    )[0];

    setText([
      text[0].replace(new RegExp(replacedWord, "g"), wordToReplaceWith)
    ]);
    setModifiedText(null);
    setServerResponse(null);
    setIsCorrected(true);
    setDropdownContent([]);
  };

  const hasResponse = serverResponse !== null;

  return (
    <Box>
      <Content>
        <div
          onInput={handleTextChange}
          contentEditable={!hasResponse}
          style={{ border: "1px solid red" }}
        >
          {hasResponse && modifiedText
            ? modifiedText.map((text, index) => <span key={index}>{text}</span>)
            : isCorrected
            ? text[0]
            : ""}
        </div>
        <br />
        {displayDrop ? (
          <div
            id="myDropdown"
            class="dropdown-content"
            onClick={() => setDisplayDrop(false)}
          >
            {dropdownContent.map((content, index) => (
              <>
                <strong onClick={() => replaceText(content)} key={index}>
                  {content}
                </strong>{" "}
              </>
            ))}
          </div>
        ) : null}
        <br />
        <Button
          color="primary"
          onClick={handleAnalysis}
          disabled={loading || text.length === 0}
        >
          analyze
        </Button>
        <hr />
        {hasResponse && (
          <Label>
            Joy{" "}
            <Progress
              value={Math.random() * 100}
              color="info"
              onClick={() => setSentiment("joy")}
            />
          </Label>
        )}
      </Content>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
从“rbx”导入{内容、下拉列表、标签、进度、按钮、框}；
导入“rbx/index.css”；
函数App（）{
const[serverResponse，setServerResponse]=useState（null）；
const[text，setText]=useState（[]）；
const[loading，setLoading]=useState（false）；
常量[modifiedText，setModifiedText]=useState（null）；
const[selectedtouction，setEntation]=useState（null）；
const[dropdownContent，setDropdownContent]=useState（[]）；
const[isCorrected，setIsCorrected]=使用状态（false）；
const[displayDrop，setDisplayDrop]=useState（false）；
useffect（（）=>{
如果（服务器响应和所选情感（&S）{
const newText=Object.entries（serverResponse[selectedtouction]）.map(
（[文字，建议]）=>{
常量部分=文本[0]。拆分（word）；
常量newText=[]；
parts.forEach（（part，index）=>{
新文本推送（部分）；
如果（索引！==parts.length-1）{
newText.push(
{
设置内容（建议）；
setDisplayDrop（真）；
}}
onMouseOut={（）=>setDisplayDrop（false）}
>
{word}
);
}
});
返回新文本；
}
);
setModifiedText（newText.flat（））；
}
}，[serverResponse，text，selectedtouction]）；
常量handleAnalysis=（）=>{
设置加载（真）；
设置超时（（）=>{
设置加载（假）；
setServerResponse（{joy:{collective:[“内部”，“常量”]}）；
}, 1500);
};
const handleTextChange=事件=>{
setText（[event.target.innerText]）；
};
const replaceText=wordtoreplacetwith=>{
const replacedWord=Object.entries（serverResponse[selectedtouction]）。查找(
（[word，Recommensions]）=>Recommensions.includes（word，Recommensions）
)[0];
塞特克斯([
文本[0]。替换（新的RegExp（replacedWord，“g”），单词替换为）
]);
setModifiedText（空）；
setServerResponse（空）；
setIsCorrected（true）；
setDropdownContent（[]）；
};
const hassresponse=serverResponse！==无效的
返回(
{hassresponse&&modifiedText
？modifiedText.map（（文本，索引）=>{text}）
：已更正
？文本[0]
: ""}


{displayDrop(
setDisplayDrop（假）}
>
{dropdownContent.map（（内容，索引）=>(
replaceText（content）}key={index}>
{content}
{“}
))}
)：null}


分析

{hassresponse&&(
欢乐{“}
SETSENTION（“joy”）}
/>
)}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；