为什么我的 React NavBar 按钮不起作用？答案

【问题标题】：Why are my React NavBar buttons not working?为什么我的 React NavBar 按钮不起作用？
【发布时间】：2022-01-23 22:42:17
【问题描述】：

我正在创建 Netflix 网络应用程序的克隆。我目前正在开发登陆页面。我在下面包含了我的代码。这是我尝试构建此页面的几种不同方式之一。

当前的布局是我希望的样子，但是页面顶部的“main-slice__language-button”和“main-slice__signin-button”不起作用——这意味着当我点击选择下拉菜单，并且“登录”按钮未显示为可点击。谁能解释为什么它不能以这种方式工作，以及对更好的替代方案有什么建议吗？

screenshot of landing page

import backgroundImage from '../../images/mooshflix-background.jpeg';
import netflixLogo from '../../images/netflix-logo.png';

import './MainSlice.css';


const MainSlice = () => {

    return (
        <div className='main-slice-container'>
            <img className='background-image' src={backgroundImage} alt='mooshflix background' />
            <div className='header'>
                <img className='main-slice__logo' src={netflixLogo} alt='' />
                <div className='main-slice__header-buttons'>
                    <select className='main-slice__language-button'>
                        <option>English</option>
                        <option>Spanish</option>
                    </select>
                    <button className='main-slice__signin-button'>Sign In</button>
                </div>
            </div>
            <div className='main-slice__text-container'>
                    <h1 className='main-slice__title'>Unlimited movies, TV shows, and more.</h1>
                    <h2 className='main-slice__subtitle'>Watch anywhere. Cancel anytime.</h2>
                    <div className='main-slice__email-form-container'>
                        <h3 className='email-form-title'>Ready to watch? Enter your email to create or restart your membership.</h3>
                        <form>
                            <input placeholder='Email Address' ></input>
                            <button className='main-slice__email-form-button'>Get Started ></button>
                        </form>
                    </div>
                </div>
        </div>
    )
}

export default MainSlice;```

【问题讨论】：

你的意思是它不工作？你收到错误信息了吗？还是什么都没发生？
此外，如果您使用事件侦听器或您在帖子中所说的类是main_slice__language_button 和main_slice__signin_button，但在您的代码中它们似乎是main-slice__language-button 和main-slice__signin-button。注意冲突的破折号和下划线。
我编辑了主帖来描述它是如何不工作的。选择按钮单击时不提供下拉选择器，并且登录按钮根本不可单击，尽管它是一个按钮。我已经修正了帖子中的错别字，感谢您指出冲突的破折号/下划线。这只是帖子中的一个错字，不是我的代码编辑器。
好吧，这个按钮可能没有做任何事情，因为你没有让它做任何事情......尝试添加类似<button className="..." onClick={() => alert("Clicked!")}>...</button>
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript reactjs navbar

【解决方案1】：

因为你没有做任何事情，你为那个按钮调用了什么事件？您必须将一些事件侦听器（例如 onClick）添加到您的 btn，如下所示：

const onStart = () => {
  DO STH WHAT YOU WANT
}

<button className='main-slice__email-form-button' onClick={onStart}>
    Get Started
</button>

【讨论】：