reactjs - 如何使用反应和材料 ui 一次仅显示一个活动项目

Question

我正在开发一个应用程序，现在我需要当我单击一个按钮时，将一个活动类添加到我正在显示的卡片中。

到目前为止，当我点击时，我得到了卡片的索引。单击后，所需的卡片将更改其背景颜色。但是，当我单击另一个按钮时，前一张卡片仍然处于活动状态并具有相同的颜色。我想一次只显示一张有效的卡片。

import React, { Fragment } from "react";
// MUI
import { Container, Grid } from "@material-ui/core";
import { Switch, Route, useRouteMatch } from "react-router-dom";
// Components
import DayCardItem from "./DayCardItem";
import Carousel from "./Carousel";

const DayCard = (props) => {
      <div
        style={{
          maxWidth: 1200,
          marginLeft: "auto",
          marginRight: "auto",
          marginTop: 64,
        }}
      >
        <Carousel show={3}>
          {dailyData &&
            dailyData.map((day, index) => (
              <DayCardItem key={index} day={day} cardIndex={index} />
            ))}
        </Carousel>
      </div>
    </Fragment>
  );
};
export default DayCard;

import React, { useEffect, useState } from "react";
import moment from "moment";
import { Link, useRouteMatch } from "react-router-dom";
// MUI
import { Button, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
//Redux
import { useSelector } from "react-redux";

const useStyles = makeStyles((theme) => ({
  cardItem: {
    backgroundColor: "#ffffff",
  },
  activeCardItem: {
    color: "#364150",
    backgroundColor: "#efefef"
  },
}));

const DayCardItem = (props) => {
  const { day, cardIndex } = props;

  const classes = useStyles();

  let [activeItem, setActiveItem] = useState(null);


  const handleActiveCard = (cardId) => {
    let actualCardId = activeItem;
    actualCardId = cardId;
    setActiveItem(actualCardId);
    };

  return (
    <div className={`${cardIndex === activeItem && classes.activeCardItem}`}>
      <Link to={`${url}/${paramUrlId}`}>
        <Button
          variant="contained"
          color="primary"
          onClick={() => handleActiveCard(cardIndex)}
        >
          Weather Details
        </Button>
      </Link>
    </div>
  );
};

export default DayCardItem;

标签： reactjsmaterial-ui

Answer 1

您需要将状态移动到其父级

import React, { Fragment } from "react";
// MUI
import { Container, Grid } from "@material-ui/core";
import { Switch, Route, useRouteMatch } from "react-router-dom";
// Components
import DayCardItem from "./DayCardItem";
import Carousel from "./Carousel";

const DayCard = (props) => {
let [activeItem, setActiveItem] = useState(null);
return(
      <div
        style={{
          maxWidth: 1200,
          marginLeft: "auto",
          marginRight: "auto",
          marginTop: 64,
        }}
      >
        <Carousel show={3}>
          {dailyData &&
            dailyData.map((day, index) => (
              <DayCardItem 
                  key={index} 
                  day={day} 
                  cardIndex={index} 
                  activeItem={activeItem} 
                  setActiveItem={setActiveItem}
               />
            ))}
        </Carousel>
      </div>
    </Fragment>
  );
};
export default DayCard;

DayCardItem.js

import React, { useEffect, useState } from "react";
import moment from "moment";
import { Link, useRouteMatch } from "react-router-dom";
// MUI
import { Button, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
//Redux
import { useSelector } from "react-redux";

const useStyles = makeStyles((theme) => ({
  cardItem: {
    backgroundColor: "#ffffff",
  },
  activeCardItem: {
    color: "#364150",
    backgroundColor: "#efefef"
  },
}));

const DayCardItem = (props) => {

  const { day, cardIndex } = props;
  const { activeItem, setActiveItem } = props;
  const classes = useStyles();


  const handleActiveCard = (cardId) => {
    let actualCardId = cardId;
    setActiveItem(actualCardId);
    };

  return (
    <div className={`${cardIndex === activeItem && classes.activeCardItem}`}>
      <Link to={`${url}/${paramUrlId}`}>
        <Button
          variant="contained"
          color="primary"
          onClick={() => handleActiveCard(cardIndex)}
        >
          Weather Details
        </Button>
      </Link>
    </div>
  );
};

export default DayCardItem;

这应该可以解决您的问题，基本上是因为您在 DayCardItem 内创建活动状态，因此它特定于每个项目，如果您将其转移到 DayCard，那么所有项目都是通用的，这是您对此用例的要求。

小提示：不要使用索引作为键