时间戳

首页 > 解决方案 > ReactJS中用户点击链接时如何在return语句外声明变量并切换变量？

javascript - ReactJS中用户点击链接时如何在return语句外声明变量并切换变量？

问题描述

我对 ReactJS 比较陌生，我正在尝试为我的学校俱乐部制定时间表。所以这是我网站的图片。

我想要做的是能够通过单击日程日历上的任何其他日期来更改日程。所以如果我点击星期六，它将是“活动的”，所以它会变成蓝色，然后会显示当天的事件。周日也是如此。我不知道如何实现。我基本上需要在 return 语句之外声明一个变量，并在用户单击链接时切换变量。

const schedule = () => {
    return (
        <React.Fragment>
            <div className='schedule-page'>
                <Navbar />
                <MobileNavBar />
                <div className='schedule-map'>
                    <div className='sche-side'>
                        <div className='timer'>
                            <div className='timer-header'>
                                <h1>Timer</h1>
                            </div>
                            <div className='timer-second-row'>
                                <div className='next-event'>
                                    <h2>New Event</h2>  
                                </div>
                                <div className='start-time'>
                                    <h2>Start Time</h2>
                                </div>
                                <div className='countdown'>
                                    <h2>Countdown</h2>
                                </div>
                            </div>
                        </div>
                        <h1>Schedule</h1>
                        <div className='sche-date'>
                            <div className='fri-day'>
                                <div className='day active'>Fri. Feb, 21</div>
                            </div>
                            <div className='first-day'>
                                <div className='day'>Sat. Feb, 22</div>
                            </div>
                            <div className='second-day'>
                                <div className='day'>Sun. Feb, 23</div>
                            </div>
                        </div>
                        <div className='events'>
                            <ul className='event-ul'>
                                <li className='event event-active'>
                                    <span className='time'>4:00PM</span>
                                    <span className='todo'>Check-In</span>
                                    <span className='detail'>Be sure to check your email and fill out the hacker check-in form, then hop onto our Hopin and Discord!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>6:00PM</span>
                                    <span className='todo'>Opening Ceremony</span>
                                    <span className='detail'>Come join the opening ceremony for SacHacks 2021 to hear from our amazing sponsors and learn more about our hackathon!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>6:15PM</span>
                                    <span className='todo'>IBM Keynote Workshop</span>
                                    <span className='detail'>Come learn more about IBM Z</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>7:00PM</span>
                                    <span className='todo'>Hacking Starts + Team Mixer</span>
                                    <span className='detail'>Don’t have a team? No worries! Meet and team up with other hackers to launch your ideas at SacHacks 2021!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>7:30PM</span>
                                    <span className='todo'>Datathon for Social Good: ML on Z</span>
                                    <span className='detail'>Learn about machine learning on Z from IBM engineers and last year’s IBM Z winners!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>9:10PM</span>
                                    <span className='todo'>Intro to UI/UX</span>
                                    <span className='detail'>Want to make your project stand out? Learn more about UI/UX Design in this interactive workshop hosted by Grace from Design Buddies!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>10:10PM</span>
                                    <span className='todo'>Exploding Designer's Block</span>
                                    <span className='detail'>Come learn more about game design in our Exploding Designer’s Block workshop, hosted by Dan, Lead Designer at EA!</span>
                                </li>
                                <li className='event'>
                                    <span className='time'>11:30PM</span>
                                    <span className='todo'>Intro to Web Dev HTML/CSS</span>
                                    <span className='detail'>No experience with Web Development? Come build a website with HTML and CSS!</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <Copyright />
        </React.Fragment>
    );
};

export default schedule;

这是我当前网站的代码。如果你愿意，我也可以显示 CSS 文件。如果有人可以帮助我，将不胜感激！

标签： javascriptreactjs

解决方案

使用 useState 钩子

const schedule = () => {
const [active,setActive]=useState("");
.....
}

你可以通过改变 active 的值

setActive("Saturday")

这会导致组件重新渲染。状态是 React 中一个非常基础也是最常用的概念，所以我建议你自己熟悉一下。

推荐阅读