-1

第一次正确执行该功能，之后一直单击按钮 - 不。我认为它会在某个地方终止。我认为在某些检查点中，出于某种原因，该值是空的，也许这就是它不执行的原因，ebacsie 第一次总是正确执行，之后总是 - 不。之后的所有时间我都看不到“功能几乎完成执行”的控制台日志

预期的行为是有一个图标箭头，onClick 将在导航中打开/关闭主链接的子链接列表。

像这样：

图标是“>”，链接是 somelink

当 somelink 被点击时，我想要的导航外观是：“<” somelink link1 link2 link3 （以便打开子菜单）

我正在使用 React 钩子。请帮帮我，我做错了什么？

    const ServiceConditions = () => {
      const [arrowIsClicked, setArrowIsClicked] = React.useState(false);
  const handleSublinksExpandCollapse = (e : React.MouseEvent<SVGSVGElement>) => {
    console.log("arrow is clicked");
    if (arrowIsClicked) return;
    setArrowIsClicked(true);
    if ((e.target as HTMLElement).style.transform === "rotate(0deg)") {
      (e.target as HTMLElement).style.transform = "rotate(180deg)";
     
      if (!e.target) console.log(e.target); return
      const parent = (e.target as HTMLElement).parentNode;
      if (!parent) console.log(e.target); return 
      const nextSibling = parent.nextSibling;
      if (!nextSibling) console.log(e.target); return 
      (nextSibling as HTMLElement).style.display = "block";
      console.log("function has almost done executing")
      setArrowIsClicked(false)
      
    } else {  setArrowIsClicked(true); (e.target as HTMLElement).style.transform = "rotate(0deg)";
    
    if (!e.target) console.log(e.target); return 
    const parent = (e.target as HTMLElement).parentNode;
    if (!parent) console.log(e.target); return 
    const nextSibling = parent.nextSibling;
    if (!nextSibling) console.log(e.target); return
    (nextSibling as HTMLElement).style.display = "none"; setArrowIsClicked(false); }
   
  }
    
      return (
          <Container>
            {    isDesktop &&
              <><NavigationContainer>
              <StyledScrollSpy
              scrollTargetIds={["section_1", "section_2", "section_3"]}
              offset={100}
              activeNavClass="is-active"
              scrollDuration="1000"
              headerBackground="true"
          >
              <List>
                  <MainRef><Line1><MainRefTypography variant="body1"><a href="#">Home</a></MainRefTypography><IconStyled id="ad-ap" onClick={(e : React.MouseEvent<SVGSVGElement>) => {handleSublinksExpandCollapse(e)}}></IconStyled></Line1><div><LinksInsideList>
                    <MainRef><LinkInsideTypography variant="body4"><a href="#section_1">Section 1</a></LinkInsideTypography></MainRef>
                  <MainRef><LinkInsideTypography variant="body4"><a href="#section_2">Section 2</a></LinkInsideTypography></MainRef>
                  <MainRef><LinkInsideTypography variant="body4"><a href="#section_3">Section 3</a></LinkInsideTypography></MainRef>
                  </LinksInsideList></div></MainRef>
                  
              </List>
              </StyledScrollSpy>
          
          </NavigationContainer></>    }
                    <Articles>
                      <PageName variant={isDesktop ? "h3" : "h1"}>SERVICE CONDITIONS</PageName>
                      <Bar align={BarAlign.Left} />
                      <Spacing mobile={3} desktop={3}/>
                        <div style={{"height": "400px", width: "100%"}}><span>Welcome!</span></div>
                        <div id="section_1" style={{"height": "500px", width: "100%"}}><span>Section 1</span></div>
                        <div id="section_2" style={{"height": "500px", width: "100%"}}><span>Section 2</span></div>
                        <div id="section_3" style={{"height": "500px", width: "100%"}}><span>Section 3</span></div>
                        </Articles>
            </Container>
      );
    };
    export default ServiceConditions;
4

1 回答 1

1

好吧，我认为问题在于：

“如果（arrowIsClicked）返回；”

首先，它完全将arrowIsClicked设置为true，然后在该行每次都退出。

这是一种实现按钮的简单方法，该按钮根据打开/关闭状态旋转箭头：

function CollapsibleButton() {
  const [open, setOpen] = useState(false);

  return (
    <button
      style={{
        display: "inline-block",
      }}
      // Simply setting open to the opposite value.
      onClick={() => setOpen(!open)}
    >
      <span
        style={{
          // This makes it feel animated:
          transition: "transform 200ms linear",
          // This rotates the element:
          transform: `rotateZ(${open ? 0 : "180deg"})`,
          display: "inline-block",
        }}
      >
        {"<"}
      </span>
      Click me
    </button>
  );
}
于 2021-06-29T13:32:03.227 回答