Reactjs点击新项时无法取消选中前一项的问题求助

你的问题出在直接操作DOM修改样式，没有利用React的状态来统一管理视图。每次点击新项时，只给当前元素加了样式，但之前选中的元素没有被重置，而且React的渲染逻辑不会自动清除这些行内样式。

解决方案步骤： #

• 定义一个CSS类来表示选中状态，代替行内样式
• 完全通过selectedItem状态来判断每个项是否应该应用选中样式
• 移除handleSelect里直接操作DOM的代码，只更新状态

修改后的代码： #

首先添加CSS样式（可放在组件对应的CSS文件中）：

.timeslots {
  /* 你的默认样式，可根据需求调整 */
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.timeslots.selected-time {
  background-color: black;
  color: white;
}

然后修改组件代码：

const Time = () => {
  const [selectedItem, setSelectedItem] = React.useState();

  // 只更新选中状态，不再直接操作DOM
  const handleSelect = (selectedTime) => {
    setSelectedItem(selectedTime);
  };

  const dataTime = React.useMemo(() => TimeData, []);
  const chunks = React.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.join('-')} className="inline"> {/* 优化key值，避免重复 */}
                {timeslot.map((time) => {
                  // 根据状态动态添加选中类
                  const isSelected = selectedItem === time;
                  return (
                    <p
                      className={`timeslots target ${isSelected ? 'selected-time' : ''}`}
                      key={time}
                      onClick={() => handleSelect(time)}
                    >
                      {time}
                    </p>
                  );
                })}
              </div>
            );
          })}
        </div>
        <div>{selectedItem}</div>
        <div className='new_Date'>PICK A NEW DATE</div>
      </div>
    </div>
  );
};

关键改进点： #

1. 状态驱动样式：通过selectedItem === time判断是否给当前项加选中类，React会自动根据状态变化重新渲染，旧选中项会自动移除类名
2. 移除DOM操作：符合React数据驱动的理念，避免手动操作DOM带来的视图不一致问题
3. 优化key值：原代码用数组直接作为key可能引发渲染警告，改成timeslot.join('-')生成唯一字符串key，符合React的key规范

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