React中实现点击按钮切换背景色高亮直到其他按钮被点击的方法

你可以通过新增一个状态存储当前选中的时间值，再给按钮绑定动态样式来实现需求，具体修改如下：

1. 新增选中状态存储
   在你的函数组件内部新增一个state用来记录当前选中的时间：

import { useState } from 'react';

// 组件内部代码
const [selectedTime, setSelectedTime] = useState('');
// 如果需要默认选中第一个，把初始值改成'9:00am'即可

2. 改造点击事件函数
   在原有逻辑基础上增加更新选中状态的代码：

function clickedtime(e) {
  const time = e.target.value;
  settime(time);
  setSelectedTime(time);
}

3. 给按钮绑定动态样式
   修改按钮的style属性，判断当前按钮的value是否等于选中的时间，匹配时就使用高亮背景色：

<TabPanel className="tabcss" style={styles.tabpannel}>
  <button
    onClick={clickedtime}
    value="9:00am"
    style={{
      ...styles.button,
      // 这里的#1677ff可以替换成你需要的高亮背景色
      backgroundColor: selectedTime === '9:00am' ? '#1677ff' : styles.button.backgroundColor
    }}
  >
    9:00am
  </button>
  <button
    onClick={clickedtime}
    value="9:30am"
    style={{
      ...styles.button,
      backgroundColor: selectedTime === '9:30am' ? '#1677ff' : styles.button.backgroundColor
    }}
  >
    9:30am
  </button>
  {/* 其余按钮按照相同规则修改即可 */}
</TabPanel>

优化方案（可选） #

如果按钮数量较多，你可以把时间值存成数组循环渲染，减少重复代码：

// 提前定义所有时间选项
const timeList = ['9:00am', '9:30am', '10:00am', '10:30am', /* 其余时间值 */];

<TabPanel className="tabcss" style={styles.tabpannel}>
  {timeList.map(timeItem => (
    <button
      key={timeItem}
      onClick={clickedtime}
      value={timeItem}
      style={{
        ...styles.button,
        backgroundColor: selectedTime === timeItem ? '#1677ff' : styles.button.backgroundColor
      }}
    >
      {timeItem}
    </button>
  ))}
</TabPanel>

内容的提问来源于stack exchange，提问作者meenu cd