Question

我是React和JS的新手，我正在尝试创建一个带有事件的列表。每个事件应显示一个名称，并在单击时展开以显示更多信息。我设法渲染了三个元素，并在单击每个元素时使某事发生，但是我认为这是不对的。同样，当按下元素时，我似乎无法更改元素的名称。无论如何，以下代码始终显示相同的名称。当元素为“非活动”时，它应仅显示事件的名称和时间。单击它时，它应该显示所有内容。使用下面的代码，我希望它在是和否之间切换，因为由于某种原因我无法到达类之间的事件。我确定这里的大多数代码是错误的：

import * as React from "react";
import "./App.css";
import CalendarEvent from "./CalendarEvent";

export default class Calendar extends React.Component {
  event1 = new CalendarEvent(
    1,
    new Date("December 20, 1995 10:15:00"),
    new Date("December 20, 1995 12:15:00"),
    "Code",
    "Learn React by fooling around",
    "Company1",
    "LA"
  );
  event2 = new CalendarEvent(
    2,
    new Date("December 25, 1995 12:15:00"),
    new Date("December 25, 1995 15:45:00"),
    "Coffee",
    "Drink coffee",
    "Company1",
    "LA"
  );
  event3 = new CalendarEvent(
    3,
    new Date("December 25, 1995 16:15:00"),
    new Date("December 25, 1995 18:30:00"),
    "Travel",
    "Take the bus home",
    "Streets",
    "LA"
  );
  eventArray = [this.event1, this.event2, this.event3];

  state = {
    activeIndex: null
  };

  handleClick = index => this.setState({ activeIndex: index });
  render() {
    return (
      <div>
        <MyClickable
          name={
            this.event1.topic +
            " " +
            this.event1.startTime.getHours() +
            ":" +
            this.event1.startTime.getMinutes()
          }
          index={0}
          isActive={this.state.activeIndex === 0}
          onClick={this.handleClick}
        />
        <MyClickable
          name="EntryB"
          index={1}
          isActive={this.state.activeIndex === 1}
          onClick={this.handleClick}
        />
        <MyClickable
          name="EntryC"
          index={2}
          isActive={this.state.activeIndex === 2}
          onClick={this.handleClick}
        />
      </div>
    );
  }
}

class MyClickable extends React.Component {
  handleClick = () => this.props.onClick(this.props.index);

  render() {
    return (
      <li
        type="li"
        className={this.props.isActive ? "EventUl" : "DailyDate"}
        name={this.props.isActive ? "YES" : "NO"} // This has no effect
        onClick={this.handleClick}
      >
        {this.props.name}
      </li>
    );
  }
}

class CalendarEvent {
  constructor(
    id,
    startTime,
    endTime,
    topic,
    description,
    organizer,
    eventLocation
  ) {
    this.id = id;
    this.startTime = startTime;
    this.endTime = endTime;
    this.topic = topic;
    this.description = description;
    this.organizer = organizer;
    this.eventLocation = eventLocation;
  }

  getId() {
    return this.id;
  }
  getConcatedString() {
    return (
      this.startTime.getHours() +
      ":" +
      this.startTime.getMinutes() +
      "-" +
      this.endTime.getHours() +
      ":" +
      this.endTime.getMinutes() +
      "|" +
      this.topic +
      "|" +
      this.description +
      "|" +
      this.organizer +
      "|" +
      this.eventLocation
    );
  }

  getStartTime() {
    return this.startTime;
  }

  getEndTime() {
    return this.endTime;
  }

  getTopic() {
    return this.topic;
  }

  getDescription() {
    return this.description;
  }

  getOrganizer() {
    return this.organizer;
  }

  getEventLocation() {
    return this.eventLocation;
  }
}

Answer 1

在MyClickable组件中，名称是您要传递的道具，但 li是一个html元素，名称是一个属性，该属性在开发工具的Elements标签中与类名一起更改为YES或NO 你可以看看

如果要更改道具的实际名称值您需要在父级中进行更改，并将函数引用传递给MyClickable Component，类似于handleClick

单击元素时更改内容和样式

1 个答案: