reactjs - 使用反应图标做出反应的 Onclick 事件

Question

我有一个汉堡包图标（GoThreeBars）和一个关闭图标（GoX），我想在 react js 上创建一个 onClick 事件，但我的图标不起作用。这是我的代码。

import React, {useState} from 'react';
import './header.css';
import { Link } from 'react-router-dom';
import { GoX } from "react-icons/go";
import { GoThreeBars } from "react-icons/go";

function header () {
  const [click, setClick] = useState (false)

  const handleClick =() => setClick (!click)
  

  return (
    <nav className="header">
     <Link to ='/' clasName ="header-logo">
       Nike
     </Link>
     
     <div className="menu" onClick={handleClick}> 
      <i className={click ?<GoThreeBars/> : <GoX/>}/>
     </div>
    
    </nav>
  );
};

export default header;

标签： reactjs

Answer 1

使用 className=menu 更改 div，如下所示：

     <div className="menu" > 
      {click ? <GoThreeBars onClick={handleClick} /> 
              : <GoX onClick={handleClick} />}
      </div>