Reactjs下拉菜单悬停在单词上时不显示

Posted 2023-01-30

有人可以告诉我为什么此演示中未显示下拉菜单吗？当我将鼠标悬停在“集体”一词上时，下拉菜单应该显示吗？

https://codesandbox.io/s/funny-river-c76hu

要使该应用正常运行，您必须在输入框中输入“ collective”，单击“ analyse”，然后将显示一个进度条，单击进度条中的蓝线，在“ collective”一词下将显示一个下划线，然后您应该将鼠标悬停在“ 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);
                  
                >
                  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);

css文件

.App 
  font-family: sans-serif;
  text-align: center;

.highlight 
  background: red;
  text-decoration: underline;


.dropbtn 
  color: white;

  font-size: 16px;
  border: none;
  cursor: pointer;


.dropbtn:hover,
.dropbtn:focus 
  background-color: #2980b9;


.dropdown 
  position: relative;
  display: inline-block;


.dropdown-content 
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;


.show 
  display: block;

有人可以告诉我为什么此演示中未显示下拉菜单吗？当我将鼠标悬停在“集体”一词上时，下拉菜单应该显示吗？ https://codesandbox.io/s/funny-river-c76hu对于...

答案

问题是这样：