首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React Hooks -根据条件突出显示一周中的某一天

React Hooks是React的一种特性,它允许我们在无需编写类组件的情况下,使用状态和其他React特性。Hooks提供了一种更简洁、可重用和可测试的方式来编写React组件。

对于根据条件突出显示一周中的某一天的需求,我们可以使用React Hooks来实现。下面是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';

const WeekDayHighlight = () => {
  const [selectedDay, setSelectedDay] = useState('');

  const handleDayClick = (day) => {
    setSelectedDay(day);
  };

  return (
    <div>
      <button onClick={() => handleDayClick('Monday')} style={{ fontWeight: selectedDay === 'Monday' ? 'bold' : 'normal' }}>Monday</button>
      <button onClick={() => handleDayClick('Tuesday')} style={{ fontWeight: selectedDay === 'Tuesday' ? 'bold' : 'normal' }}>Tuesday</button>
      <button onClick={() => handleDayClick('Wednesday')} style={{ fontWeight: selectedDay === 'Wednesday' ? 'bold' : 'normal' }}>Wednesday</button>
      <button onClick={() => handleDayClick('Thursday')} style={{ fontWeight: selectedDay === 'Thursday' ? 'bold' : 'normal' }}>Thursday</button>
      <button onClick={() => handleDayClick('Friday')} style={{ fontWeight: selectedDay === 'Friday' ? 'bold' : 'normal' }}>Friday</button>
      <button onClick={() => handleDayClick('Saturday')} style={{ fontWeight: selectedDay === 'Saturday' ? 'bold' : 'normal' }}>Saturday</button>
      <button onClick={() => handleDayClick('Sunday')} style={{ fontWeight: selectedDay === 'Sunday' ? 'bold' : 'normal' }}>Sunday</button>
    </div>
  );
};

export default WeekDayHighlight;

在上述代码中,我们使用了useState Hook来创建了一个名为selectedDay的状态变量,并使用setSelectedDay函数来更新该变量。每个按钮都有一个onClick事件处理函数,当点击按钮时,会调用handleDayClick函数,并将相应的日期作为参数传递给它。在handleDayClick函数中,我们通过调用setSelectedDay来更新selectedDay的值。

每个按钮的样式根据selectedDay的值来动态设置,如果selectedDay与按钮对应的日期相等,则设置字体加粗,否则设置为正常字体。

这样,当用户点击按钮时,被选中的日期将以加粗字体显示,其他日期将以正常字体显示。

推荐的腾讯云相关产品:无

希望以上信息能够帮助到您!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券