Блог

Я новичок в react.js и я хочу применить функцию переключения в поле «место», используя состояние «Открыто», и мое намерение состоит в том, что она работает только тогда, когда я нажимаю один раздел «Место», поэтому я добавил событие onClick в поле «место». но все элементы переключаются одновременно.

Я думаю, это потому, что у всех них одно и то же название класса. как я могу это исправить?

 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) =gt; {  const [placeId, setPlaceId] = useState();  const [isOpen, setIsOpen] = useState(false);    const { loading, error, data } = useQuery(FETCH_CITIES_QUERY, {  variables: { cityName: cityName },  });   const showPlaceInfo = (placeId, e) =gt; {  e.preventDefault();  setPlaceId(placeId);  setIsOpen((isOpen) =gt; !isOpen);  };   return (  lt;divgt;  {data amp;amp;  data.cities.map((city) =gt; {  return (  lt;div className="city-box"gt;  {city.places.map((place) =gt; {  return (  // this is place-box div and I added onClick event here  lt;div  className="place-box"  key={place.id}  onClick={(e) =gt; {  e.stopPropagation();  showPlaceInfo(place.id, e);  }}  gt;  lt;li className="place-name"gt;{place.name}lt;/ligt;  {isOpen amp;amp; (  lt;PlaceResult className="place-indiv" placeId={placeId} /gt;  )}  {!isOpen amp;amp; (  lt;div className="place-info-box"gt;  lt;ligt;{place.address}lt;/ligt;  {conditionCheck(city.condition)}  lt;ligt;{place.phone}lt;/ligt;  lt;/divgt;  )}  lt;/divgt;  );  })}  lt;/divgt;  );  })}  lt;/divgt;  ); };  export default CityResult;  

Ваша переменная 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) =gt; {  const [placeId, setPlaceId] = useState();  const [openedPlaceId, setOpenedPlaceId] = useState(undefined);    const { loading, error, data } = useQuery(FETCH_CITIES_QUERY, {  variables: { cityName: cityName },  });   const showPlaceInfo = (placeId, e) =gt; {  e.preventDefault();  setPlaceId(placeId);  setOpenedPlaceId(placeId);  };   return (  lt;divgt;  {data amp;amp;  data.cities.map((city) =gt; {  return (  lt;div className="city-box"gt;  {city.places.map((place) =gt; {  return (  // this is place-box div and I added onClick event here  lt;div  className="place-box"  key={place.id}  onClick={(e) =gt; {  e.stopPropagation();  showPlaceInfo(place.id, e);  }}  gt;  lt;li className="place-name"gt;{place.name}lt;/ligt;  {openedPlaceId === place.id amp;amp; (  lt;PlaceResult className="place-indiv" placeId={placeId} /gt;  )}  {!(openedPlaceId === place.id) amp;amp; (  lt;div className="place-info-box"gt;  lt;ligt;{place.address}lt;/ligt;  {conditionCheck(city.condition)}  lt;ligt;{place.phone}lt;/ligt;  lt;/divgt;  )}  lt;/divgt;  );  })}  lt;/divgt;  );  })}  lt;/divgt;  ); };  export default CityResult;  

Таким образом, будет открыто только выбранное место.