Javascript 如何切换多个列表元素的类名？

我有一个名为NavMain.js的父组件和一个名为NavEventDate.js的子组件。我正在使用道具将一些数据从父组件传递到子组件。 当呈现子组件时，我只希望第一个

元素具有
className=“selected”
，然后通过单击其他
元素，我只希望单击一个元素具有
className=“selected”
，其他
元素具有
className=“
。（已关闭）

这张图片解释了它现在是如何工作的
因此，如果我单击
元素，所有元素都将保留在
className=“selected”
中，除非我单击它两次

这是我的代码沙盒：

父组件的逻辑没有子组件中的问题那么重要。为了更好地理解我是如何传递这些道具的，我加入了所有的逻辑。
看看你的codsandbox，我已经通过重构解决了它

基本上，您希望在父对象中处理所选项目，并将所选项目传递给您的孩子。单击子级时，使用作为道具传递的handleSelect函数告诉父级您更改了所选索引

然后在您的孩子中，您只需通过bool as props（isSelected）测试，确定所选索引是否等于.map当前实例中项目的索引

所以只有一个孩子会明白这个谎言

然后在navevent日期中，您可以重构有条件地添加所选类的方式。由于如果类为空，则不希望传递该类，因此可以使用此运算符&&。基本上，如果isSelected为true，它将应用所选的类，否则它不会应用任何东西

我删除了第一个条件，因为我不明白你想做什么，只留下isSelected作为参考

纳夫曼

import React, { Component } from "react";
//import "./Main.css";
import NavEventDate from "./NavEventDate.js";

export default class NavMain extends Component {
  constructor() {
    super();
    this.state = {
      currentSelectedIndex: null,
      date: [
        {
          day: 0,
          month: 0,
          year: 0,
          dayName: ""
        },
        {
          day: 0,
          month: 0,
          year: 0,
          dayName: ""
        },
        {
          day: 0,
          month: 0,
          year: 0,
          dayName: ""
        },
        {
          day: 0,
          month: 0,
          year: 0,
          dayName: ""
        },
        {
          day: 0,
          month: 0,
          year: 0,
          dayName: ""
        }
      ]
    };
    this.GetOneDayFormat.bind(this);
    this.SetDate.bind(this);
  }

  componentDidMount() {
    let startDate = new Date();
    this.SetDate(startDate);
    console.log(this.state.date);
  }

  SetDate(startDate) {
    let dates = this.state.date;
    for (let i = 0; i < 5; i++) {
      let currentDate = new Date();
      currentDate.setDate(startDate.getDate() + i);
      dates[i].day = String(currentDate.getDate());
      dates[i].month = String(currentDate.getMonth() + 1);
      dates[i].year = String(currentDate.getFullYear());
      dates[i].dayName = String(this.GetOneDayFormat(currentDate));
    }

    this.setState({
      date: dates
    });
  }

  GetOneDayFormat = (today) => {
    let dayNumber = today.getDay();
    let dayName = "";
    switch (dayNumber) {
      case 0:
        dayName = "Sunday".substring(0, 3);
        break;
      case 1:
        dayName = "Monday".substring(0, 3);
        break;
      case 2:
        dayName = "Tuesday".substring(0, 3);
        break;
      case 3:
        dayName = "Wednesday".substring(0, 3);
        break;
      case 4:
        dayName = "Thursday".substring(0, 3);
        break;
      case 5:
        dayName = "Friday".substring(0, 3);
        break;
      case 6:
        dayName = "Saturday".substring(0, 3);
        break;
      default:
        break;
    }
    return dayName;
  };

  handleSelect = (index) => {
    this.setState({ currentSelectedIndex: index });
  };

  render() {
    return (
      <nav id="sectionNav" class="datepicker event">
        <div className="clearfix list-days">
          <h1>Events</h1>
          <ul className="mobile-off">
            {this.state.date.map((data, index) => (
              <NavEventDate
                dayData={data}
                index={index}
                isSelected={this.state.currentSelectedIndex === index}
                handleSelect={this.handleSelect}
              />
            ))}
          </ul>
        </div>
      </nav>
    );
  }
}


import React，{Component}来自“React”；
//导入“/Main.css”；
从“/NavEventDate.js”导入NavEventDate；
导出默认类NavMain扩展组件{
构造函数（）{
超级（）；
此.state={
currentSelectedIndex:null，
日期：[
{
日期:0，
月份：0，
年份：0，
dayName:“
},
{
日期:0，
月份：0，
年份：0，
dayName:“
},
{
日期:0，
月份：0，
年份：0，
dayName:“
},
{
日期:0，
月份：0，
年份：0，
dayName:“
},
{
日期:0，
月份：0，
年份：0，
dayName:“
}
]
};
this.GetOneDayFormat.bind（this）；
this.SetDate.bind（this）；
}
componentDidMount（）{
让startDate=新日期（）；
此设置日期（起始日期）；
console.log（this.state.date）；
}
设置日期（起始日期）{
让日期=this.state.date；
for（设i=0；i<5；i++）{
让currentDate=新日期（）；
currentDate.setDate（startDate.getDate（）+i）；
日期[i].day=String（currentDate.getDate（））；
日期[i].month=String（currentDate.getMonth（）+1）；
日期[i].year=String（currentDate.getFullYear（））；
日期[i].dayName=String（this.GetOneDayFormat（currentDate））；
}
这是我的国家({
日期：日期
});
}
GetOneDayFormat=（今天）=>{
让dayNumber=today.getDay（）；
让dayName=“”；
开关（日数）{
案例0：
dayName=“Sunday”。子字符串（0,3）；
打破
案例1：
dayName=“星期一”。子字符串（0，3）；
打破
案例2：
dayName=“星期二”。子字符串（0,3）；
打破
案例3：
dayName=“星期三”。子字符串（0,3）；
打破
案例4：
dayName=“星期四”。子字符串（0,3）；
打破
案例5：
dayName=“星期五”。子字符串（0,3）；
打破
案例6：
dayName=“星期六”。子字符串（0,3）；
打破
违约：
打破
}
返回dayName；
};
handleSelect=（索引）=>{
this.setState（{currentSelectedIndex:index}）；
};
render（）{
返回(
事件

{this.state.date.map（（数据，索引）=>(
))}

);
}
}

NavEventDate

import React, { useState, Component } from "react";
//import "./Main.css";

function NavEventDate({ dayData, handleSelect, index, isSelected }) {
  const dayToday = new Date();

  return (
    <li
      onClick={() => handleSelect(index)}
      className={isSelected && "selected"}
      data-date="20/11/2020"
    >
      <a href="#">
        {dayData.dayName}
        <h1>{dayData.day}</h1>
      </a>
    </li>
  );
}

export default NavEventDate;

import React，{useState，Component}来自“React”；
//导入“/Main.css”；
函数NavEventDate（{dayData，handleSelect，index，isSelected}）{
const daydoday=新日期（）；
返回(
handleSelect（索引）}
className={isSelected&“selected”}
数据日期=“20/11/2020”
>

);
}
导出默认NavEventDate；

正如您所看到的，我只添加了一个css属性来将所选项目符号变为黄色，这样您就可以看到结果了

如果您需要进一步解释，请告诉我。
看看您的代码沙盒，我已经通过重构解决了它

基本上，您希望在父对象中处理所选项目，并将所选项目传递给您的孩子。单击子级时，使用作为道具传递的handleSelect函数告诉父级您更改了所选索引

然后在您的孩子中，您只需通过bool as props（isSelected）测试，确定所选索引是否等于.map当前实例中项目的索引

所以只有一个孩子会明白这个谎言

然后在navevent日期中，您可以重构有条件地添加所选类的方式。由于如果类为空，则不希望传递该类，因此可以使用此运算符&&。基本上，如果isSelected为true，它将应用所选的类，否则它不会应用任何东西

我删除了第一个条件，因为我不明白你想做什么，只留下了一个条件