ReactJS实现列表选中项背景色修改及选中值获取求助

1. 引入状态管理 #

首先在组件中添加useState来跟踪当前选中的时间：

import { useState, useMemo } from 'react'; // 确保导入useState

在组件内部初始化状态：

const [selectedTime, setSelectedTime] = useState(null);

2. 修改时间项渲染逻辑 #

给每个时间槽添加点击事件，同时根据是否选中动态切换类名：

{chunks.map((timeslot) => {
  return (
    <div key={timeslot} className="inline">
      {timeslot.map((time) => {
        const isSelected = time === selectedTime;
        return (
          <p
            className={`timeslots ${isSelected ? 'selected' : ''}`}
            key={time}
            onClick={() => setSelectedTime(time)}
          >
            {time}
          </p>
        );
      })}
    </div>
  );
})}

3. 添加选中状态样式 #

在样式文件中添加选中时的背景色样式：

.timeslots.selected {
  background-color: #2563eb; /* 替换成你需要的背景色 */
  color: #ffffff; /* 可选：调整文字颜色提升对比度 */
  border-radius: 4px; /* 可选：添加圆角优化视觉 */
}

4. 使用选中的值 #

你可以在组件任意位置调用selectedTime变量，比如提交表单、传递给父组件等：

// 示例：打印选中值
console.log('当前选中时间：', selectedTime);

// 若需传递给父组件，可通过props回调实现
// const { onTimeSelect } = props;
// onClick={() => {
//   setSelectedTime(time);
//   onTimeSelect(time);
// }}

修改后的完整组件代码 #

const Time = () => {
  const [selectedTime, setSelectedTime] = useState(null);
  const dataTime = useMemo(() => TimeData, []);
  const chunks = useMemo(() => {
    const _chunks = [];
    const tmp = [...dataTime];
    while (tmp.length) {
      _chunks.push(tmp.splice(0, 3));
    }
    return _chunks;
  }, [dataTime]);

  return (
    <div className="Main-Section">
      <div className="First-Section">Time</div>
      <div className="Second-Section">
        <div className="date_title">Wednesday , June 13</div>
        <div className="time_Slots">
          {chunks.map((timeslot) => {
            return (
              <div key={timeslot} className="inline">
                {timeslot.map((time) => {
                  const isSelected = time === selectedTime;
                  return (
                    <p
                      className={`timeslots ${isSelected ? 'selected' : ''}`}
                      key={time}
                      onClick={() => setSelectedTime(time)}
                    >
                      {time}
                    </p>
                  );
                })}
              </div>
            );
          })}
        </div>
        {/* 可选：展示选中结果 */}
        {selectedTime && <div className="selected-tip">已选择：{selectedTime}</div>}
        <div className='new_Date'>PICK A NEW DATE</div>
      </div>
    </div>
  );
};

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