在状态更新和样式更改之前，我必须单击我的链接两次

Question

我有一个问题。我希望我的链接的样式根据状态而改变。但问题是，在更新样式之前，我必须单击链接两次。但是当我使用 e.prevetndefault 时，当我单击链接时会应用样式但我无法转到该页面。这是代码。

function Footer(){
    
    const [activeValue, setIsActive] =  useState("0")
    

    return(
        <div className="footer">
    <ul className="socials">
        <li><a href="">     <i className="fab fa-facebook-f"></i>       </a></li>
        <li><a href="">     <i className="fab fa-instagram"></i>        </a></li>
        <li><a href="">     <i className="fab fa-twitter"></i>          </a></li>
        <li><a href="">     <i className="fas fa-podcast"></i>          </a></li>
        <li></li>
        

        <li><Link to="/peepNews"    onClick={()=>{setIsActive("1")}}        style={activeValue=="1"?{color:"#0B77BE",fontWeight:"600"}:null}    >Peep News</Link></li>
        <li><Link to="/faq"         onClick={()=>{setIsActive("2")}}         style={activeValue=="2"?{color:"#0B77BE",fontWeight:"600"}:null}   >FAQ</Link></li>
        <li><a href="" style={{color:"gray", fontWeight:"200"}}>Careers</a></li>
        <li><Link to="/legal"       onClick={()=>{setIsActive("3")}}         style={activeValue=="3"?{color:"#0B77BE",fontWeight:"600"}:null}       >Legal</Link></li>
        <li><a href="https://jupeglobal.com/venture-capital/">Jupe Global   </a></li>
        
    </ul>
</div>
       
    );
}

编辑： 这是我添加 useEffect 钩子的时候。但问题是每当页面重新渲染时，activeValue 都会被设置回默认值（0）而不是 1、2、3 等。

function Footer(){
    
    const [activeValue, setIsActive] =  useState("0")
    
    useEffect(() => { 
        
            setIsActive(activeValue)  ;
            alert(activeValue);
            
    
         
     },[activeValue])

    

    return(
        <div className="footer">
    <ul className="socials">
        <li><a href="">     <i className="fab fa-facebook-f"></i>       </a></li>
        <li><a href="">     <i className="fab fa-instagram"></i>        </a></li>
        <li><a href="">     <i className="fab fa-twitter"></i>          </a></li>
        <li><a href="">     <i className="fas fa-podcast"></i>          </a></li>
        <li></li>
        

        <li><Link to="/peepNews"        onClick={()=>{setIsActive("1")}}    style={activeValue=="1"?{color:"#0B77BE",fontWeight:"600"}:null}    >Peep News</Link></li>
        <li><Link to="/faq"         onClick={()=>{setIsActive("2")}}         style={activeValue=="2"?{color:"#0B77BE",fontWeight:"600"}:null}   >FAQ</Link></li>
        <li><a href="" style={{color:"gray", fontWeight:"200"}}>Careers</a></li>
        <li><Link to="/legal"       onClick={()=>{setIsActive("3")}}         style={activeValue=="3"?{color:"#0B77BE",fontWeight:"600"}:null}       >Legal</Link></li>
        <li><a href="https://jupeglobal.com/venture-capital/">Jupe Global   </a></li>
        
    </ul>
</div>
       
    );
}

Answer 1

使用 react-router，您无需使用 Link 元素导航到新页面，特别是如果您希望功能更复杂一些。

您可以创建历史文件并导出历史对象：

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

然后将历史记录导入您希望使用 javascript 导航的任何文件中。然后在您的文件中，您可以简单地创建一个您可以随意设置样式的文件（或继续与 e.preventDefault() 一起使用），然后在点击操作上导航。

  <li>
    <div
      onClick={() => {
        setIsActive("1");
        history.push("/peepNews");
      }}
      style={activeValue == "1" ? { color: "#0B77BE", fontWeight: "600" } : undefined} >
      Peep News</div>
  </li>