为了账号安全,请及时绑定邮箱和手机立即绑定

如何切换超过 1 个列表元素的 className?

如何切换超过 1 个列表元素的 className?

Smart猫小萌 2023-08-24 17:31:37
我有一个名为 NavMain.js 的父组件和一个名为 NavEventDate.js 的子组件。我使用 props 将一些数据从父组件传递到子组件。当渲染子组件时,我只希望第一个<li>元素具有className="selected",然后通过单击其他<li>元素,我只希望单击的元素具有className="selected",其他<li>元素具有className=""。(关闭)这张图片解释了它现在是如何工作的所以如果我单击元素,除非我单击两次,否则<li>所有元素都会保留。className="selected"这是我的代码沙箱:https://codesandbox.io/s/romantic-heisenberg-pg9x6 ?file=/NavMain.js父组件的逻辑并不重要,问题出在子组件中。我包含了所有逻辑,以便更好地理解我如何传递道具。
查看完整描述

1 回答

?
人到中年有点甜

TA贡献1895条经验 获得超7个赞

看看你的codsandbox,我已经通过重构解决了


基本上,您想要处理父项中选定的项目,并将选择的项传递给您的子项。当您单击子项时,您可以使用作为 props 传递的 handleSelect 函数来告诉父项您更改了所选索引。


然后在你的孩子中,你只需传递一个 bool 作为 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, { 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;

如您所见,我仅添加了一个 css 属性来将所选项目项目符号变成黄色,以便您可以看到结果。


如果您需要进一步解释,请告诉我。


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 103 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信