如何一次将活动类添加到一个动态加载的元素中（React）

Question

因此，我目前正在为医生办公室的接待员网站工作。在我的页面上，医生卡已动态加载。我想在单击该医生时向其显示相关信息，但我首先希望能够显示单击的医生更改颜色的卡。我已经设法添加了一个活动类，但是，多个卡可以一次拥有活动类 - 因此，这就是我想修复的。

我的代码如下：

const VetItem = (props) => {
  const [isActive, setIsActive] = useState(false);

  const showVetInfo = (event) => {
    event.currentTarget.classList.toggle('bg-salmon');
  };

  //show specific doctors

  const user = sessionStorage.getItem('activeUser');

  const [userId, setUserId] = useState({
    activeUser: sessionStorage.getItem('activeUser'),
  });

  const [renderActiveVet, setRenderActiveVet] = useState();
  const [activeVet, setActiveVet] = useState();

  useEffect(() => {
    axios
      .post('http://localhost:80/project-api/readActiveDoctor.php', userId)
      .then((res) => {
        let data = res.data;
        let renderActiveVet = data.map((item) => (
          <Doctors
            key={item.id}
            rerender={setRenderActiveVet}
            uniqueId={item.id}
            name={item.name}
            surname={item.surname}
            specialization={item.specialization}
            age={item.age}
            gender={item.gender}
            email={item.email}
            contact={item.phoneNumber}
            doctorId={item.doctorId}
            room={item.room}
          />
        ));
        console.log(data);
        setActiveVet(renderActiveVet);
        setRenderActiveVet(false);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [renderActiveVet]);

  return (
    <div>
      <button
        onClick={showVetInfo}
        className='individual-vet'
        id={props.uniqueId}
      >
        <div className='vet-block-img'>
          {' '}
          <img className='profileImg vet' src={dp} />
        </div>
        <div className='vet-block-text'>
          <h2>Dr. {props.name + ' ' + props.surname}</h2>
          <h4>{props.specialization}</h4>
        </div>
      </button>
    </div>
  );
};

export default VetItem;

这是将在医生页面上输出的VetItem React组件。

Answer 1

如果我理解正确，您想要这样的东西。每个医生都有自己的活跃状态。单击一个切换CSS。

function DoctorList() {
  const [doctorsData, setDoctorsData] = useState([])

  useEffect(() => {
    axios('fetchDoctorsData').then((data) => {
      setDoctorsData(data)
    })
  }, [])

  return (
    <div>
      {doctorsData.map((doctorData) => (
        <DoctorCard key={doctorData.id} doctorData={doctorData} />
      ))}
    </div>
  )
}

function DoctorCard({ doctorData }) {
  const [isCardActive, setIsCardActive] = useState(false)

  const toggleActiveClass = () => {
    setIsCardActive((prev) => !prev)
  }

  return (
    <div
      className={`doctor-card${isCardActive ? ' bg-salmon' : ''}`}
      onClick={toggleActiveClass}
    ></div>
  )
}