如何在 React 中处理具有相同类名的多个组件的 onClick 事件？

Question

我是 react.js 的新手，我想通过使用“isOpen”状态在“place-box”应用切换功能，我的意图是它只在我单击单个 place-box div 时才有效，所以我添加了 onClick 'place-box' div 的事件。但所有元素同时切换。

我猜这是因为它们都有相同的类名。 我该如何解决这个问题？

import React, { useState, useEffect } from "react";
import { useQuery } from "@apollo/client";
import { FETCH_CITIES_QUERY } from "../../server/Data/RentQueries";
import PlaceResult from "../Rent/PlaceResult";

const CityResult = (props) => {
  const [placeId, setPlaceId] = useState();
  const [isOpen, setIsOpen] = useState(false);
    
  const { loading, error, data } = useQuery(FETCH_CITIES_QUERY, {
    variables: { cityName: cityName },
  });

  const showPlaceInfo = (placeId, e) => {
    e.preventDefault();
    setPlaceId(placeId);
    setIsOpen((isOpen) => !isOpen);
  };

  return (
    <div>
      {data &&
        data.cities.map((city) => {
          return (
            <div className="city-box">
              {city.places.map((place) => {
                return (
                  // this is place-box div and I added onClick event here
                  <div
                    className="place-box"
                    key={place.id}
                    onClick={(e) => {
                      e.stopPropagation();
                      showPlaceInfo(place.id, e);
                    }}
                  >
                    <li className="place-name">{place.name}</li>
                    {isOpen && (
                      <PlaceResult className="place-indiv" placeId={placeId} />
                    )}
                    {!isOpen && (
                      <div className="place-info-box">
                        <li>{place.address}</li>
                        {conditionCheck(city.condition)}
                        <li>{place.phone}</li>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          );
        })}
    </div>
  );
};

export default CityResult;

Answer 1

您的变量isOpen 用于所有城市。如果您将isOpen 更改为true，所有位置框都会打开。您应该将当前打开的城市的id 存储在一个变量中，并与它进行比较以检查是否应该打开 for 循环中的当前城市。

import React, { useState, useEffect } from "react";
import { useQuery } from "@apollo/client";
import { FETCH_CITIES_QUERY } from "../../server/Data/RentQueries";
import PlaceResult from "../Rent/PlaceResult";

const CityResult = (props) => {
  const [placeId, setPlaceId] = useState();
  const [openedPlaceId, setOpenedPlaceId] = useState(undefined);
    
  const { loading, error, data } = useQuery(FETCH_CITIES_QUERY, {
    variables: { cityName: cityName },
  });

  const showPlaceInfo = (placeId, e) => {
    e.preventDefault();
    setPlaceId(placeId);
    setOpenedPlaceId(placeId);
  };

  return (
    <div>
      {data &&
        data.cities.map((city) => {
          return (
            <div className="city-box">
              {city.places.map((place) => {
                return (
                  // this is place-box div and I added onClick event here
                  <div
                    className="place-box"
                    key={place.id}
                    onClick={(e) => {
                      e.stopPropagation();
                      showPlaceInfo(place.id, e);
                    }}
                  >
                    <li className="place-name">{place.name}</li>
                    {openedPlaceId === place.id && (
                      <PlaceResult className="place-indiv" placeId={placeId} />
                    )}
                    {!(openedPlaceId === place.id) && (
                      <div className="place-info-box">
                        <li>{place.address}</li>
                        {conditionCheck(city.condition)}
                        <li>{place.phone}</li>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          );
        })}
    </div>
  );
};

export default CityResult;

这样只会打开点击的地方。