按钮正在扩展所有行而不是一个

Question

我正在尝试制作一个简单的按钮，当您按下它时，该按钮允许展开一行。现在，我只关心按钮的工作情况并担心以后的细节。但是，当我添加按钮时，它会扩展所有行而不是我单击的行。这是我的代码

import React, {
  useState, useEffect,
} from 'react';
import dayjs from 'dayjs';
import dayjsPluginUTC from 'dayjs-plugin-utc';
import PropTypes from 'prop-types';
import CircularProgress from '@material-ui/core/CircularProgress';
import clsx from 'clsx';
import {
  FaChevronDown, FaChevronUp,
} from 'react-icons/fa';

dayjs.extend(dayjsPluginUTC);

const Itinerary = ({ itineraryDays, isExpanded }) => {
  const [isDetailsOpen, setIsDetailsOpen] = useState(false);

  const handleDetailsClick = () => {
    setIsDetailsOpen((v) => !v);
  };

  useEffect(() => {
    if (isExpanded.value) {
      setIsDetailsOpen(true);
    }
  }, [isExpanded]);

  return (
    <div className="grid grid-cols-1 gap-5 mx-2 md:mx-10 my-5 pb-5">
      {itineraryDays && itineraryDays.map((destination, index) => (
        <div
          key={destination.itineraryDayNumber + destination.cityName}
          className={clsx('grid grid-cols-4 py-2 text-sm md:text-base', index < itineraryDays.length - 1 && 'border-b-2')}
        >
          <div>
            <div className="font-bold">
              {`Day ${destination.itineraryDayNumber}`}
            </div>
            <div className="text-gray-600">
              {dayjs(destination.itineraryDayDate).format('ddd, MMM DD')}
            </div>
          </div>

          <div className="col-span-3">
            <div className="text-blue-600">
              {destination.cityName}
            </div>
            <div className="grid grid-flow-col auto-cols-max gap-x-2">
              {destination.itineraryDayArrivalDateTime && (
              <div className="inline-block text-gray-600">
                {`Arrive: ${dayjs(destination.itineraryDayArrivalDateTime).format('h:mm A')}`}
              </div>
              )}
              {destination.itineraryDayArrivalDateTime && destination.itineraryDayDepartureDateTime
              && <div className="border-l-2 justify-self-center" />}
              {destination.itineraryDayDepartureDateTime && (
              <div className="inline-block text-gray-600">
                {`Depart: ${dayjs(destination.itineraryDayDepartureDateTime).format('h:mm A')}`}
              </div>
              )}
            </div>
          </div>

          <div className="text-blue-600">
            <button onClick={handleDetailsClick} type="button">
              {!isDetailsOpen
                && (
                  <>
                    <span>View details </span>
                    <FaChevronDown className="inline-block" />
                  </>
                )}
              {isDetailsOpen
                && (
                  <>
                    <span>Hide details </span>
                    <FaChevronUp className="inline-block" />
                  </>
                )}
            </button>
          </div>
        </div>
      ))}

      {!itineraryDays && (
      <div className="text-center">
        <CircularProgress color="secondary" />
      </div>
      )}
    </div>
  );
};

Itinerary.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  itineraryDays: PropTypes.array,
  isExpanded: PropTypes.shape({
    value: PropTypes.bool,
  }),
};

Itinerary.defaultProps = {
  itineraryDays: undefined,
  isExpanded: { value: false },
};

export default Itinerary;

这是我遇到的问题的图片

Expanded Button

Button

如您所见，该按钮在每一行上都有效，但我只想展开我单击的行。

Answer 1

您应该为每个行程项目使用一个组件，并在该组件内使用变量 detailsOpen。 实际上 detailsOpen 变量用于列表中的所有项目。