如何使用 onClick

Question

在小屏幕上，它不顯示/隱藏。 如何更改此代碼以在小屏幕上工作？

import React from 'react';
import assets from './assets';
import { FaBars, FaFacebook, FaRegHeart, FaInstagram, FaLinkedin, FaStar, FaStarHalf, FaTimes, FaTwitter } from 'react-icons/fa';

var navLinks = document.getElementById('navLinks');
function showMenu() {
    navLinks.style.right = "0";
}
function hideMenu() {
    navLinks.style.right = "-200px";
}

以上 var 錯誤地工作了幾次，但我仍然沒有得到它。

export const Home = () => (
    <>
        <section class="header">
            <nav>
                <a href="/"><img src={assets.logo} alt='Logo' width='100%' /></a>
                <div id='navLinks' class='nav-links'>
                    <FaTimes class='fa' onClick={showMenu} />
                    <ul>
                        <li><a href="/">HOME</a></li>
                        <li><a href="/About">ABOUT</a></li>
                        <li><a href="/Course">COURSE</a></li>
                        <li><a href="/Blog">BLOG</a></li>
                        <li><a href="/Contact">CONTACT</a></li>
                    </ul>
                </div>
                <FaBars class='fa' onClick={hideMenu} />
            </nav>

            <div class="text-box">
                <h1>World's Biggest University</h1>
                <p>Making website is now one of the easiest thing in the world. You just need to learn HTML, CSS,<br />Javascript and you are good to go.</p>
                <a href="/Contact" class="hero-btn">Visit Us to Know More</a>
            </div>
        </section>
    </>
)

我的 CSS 文件在下面。 我嘗試了很多方法，但我做不到。

nav .fa{
  display: none;
}

Answer 1

正如一些人之前提到的，你沒有正確使用 React 庫。

下面的（未經測試的）代碼應該更適合您。 如您所見，已使用state而不是直接更改樣式屬性。 我試圖盡可能清楚地注釋代碼，但對於更深入的說明，我建議閱讀 React 文檔。

import React, { useState } from 'react';
import assets from './assets';
import { FaBars, FaFacebook, FaRegHeart, FaInstagram, FaLinkedin, FaStar, FaStarHalf, FaTimes, FaTwitter } from 'react-icons/fa';

export const Home = () => {

    // Set state value to keep track of menu open or closed status
    const [navOpen, setNavOpen] = useState(false)

    // Open the active menu
    const open = () => {
        setNavOpen(true)
    }

    // Close the active menu
    const close = () => {
        setNavOpen(false)
    }

    return (
        <>
            <section class="header">
                <nav>
                    <a href="/"><img src={assets.logo} alt='Logo' width='100%' /></a>
                    <div id='navLinks' class='nav-links'>
                        <button onClick={open}>
                            <FaTimes class='fa' />
                        </button>

                        {
                            // Only render the UL node when the navOpen variable is true
                            navOpen && (
                                <ul>
                                    <li><a href="/">HOME</a></li>
                                    <li><a href="/About">ABOUT</a></li>
                                    <li><a href="/Course">COURSE</a></li>
                                    <li><a href="/Blog">BLOG</a></li>
                                    <li><a href="/Contact">CONTACT</a></li>
                                </ul>
                            )
                        }
                        
                    </div>
                    <button onClick={close}>
                        <FaBars class='fa' />
                    </button>
                </nav>
    
                <div class="text-box">
                    <h1>World's Biggest University</h1>
                    <p>Making website is now one of the easiest thing in the world. You just need to learn HTML, CSS,<br />Javascript and you are good to go.</p>
                    <a href="/Contact" class="hero-btn">Visit Us to Know More</a>
                </div>
            </section>
        </>
    )
}