REACT.JS 如何检测组件只点击了其中一张卡片

Question

我试图在我的代码上添加点击处理程序，我的想法是当我点击我的第一张卡片时，第一张卡片添加新的 class “选中”nad 当我点击我的第三张卡片时，否则第三张卡片，否则将添加新的 class“已选择”。当我点击任何卡片时出现问题，它总是选择第一张卡片。请帮我。谢谢。

家长代码

import React, { useState } from 'react';

import CardBus from '../CardBus/CardBus.component';

import './BusSelector.style.css'

function BusSelector() {
  const [buses, setBuses] = useState([
    {
      busNumber: 1,
      destination: 'Cibiru - Cicaheum',
      stopTime: '09:20 - 09.45',
      stopLocation: 'Jl.Jendral Sudirman',
      isSelected: false
    },
    {
      busNumber: 2,
      destination: 'Cicaheum - Cibereum',
      stopTime: '09:10 - 09.20',
      stopLocation: 'Jl.Soekarno Hatta',
      isSelected: false
    },
  ]);

  return (
    <div className="bus-selector--container">
      {buses.map((bus) => {
        return <CardBus key={bus.busNumber} eachBus={bus} buses={buses} setBuses={setBuses} />
      })}
    </div>
  );
}

export default BusSelector;

儿童代码：

import React from 'react';

import './CardBus.style.css';

import TimeProgressThin from '../../icon/Time_progress_thin.svg';
import PinLight from '../../icon/Pin_light_thin.svg';

function CardBus(props) {
  const [isSelected, setIsSelected] = useState(false)
  let { eachBus, buses, setBuses} = props;

const selectedHandler = () => {
    if (isSelected) {
      const card = document.querySelector('.card');
      card.classList.add('selected');
      return setIsSelected(!isSelected);
    }
    else {
      const card = document.querySelector('.card');
      card.classList.remove('selected');
      return setIsSelected(!isSelected);
    }
  } 

  return (
    <div key={eachBus.key} className="card" onClick={selectedHandler}>
      <div className="bus--left">
        <h1>{eachBus.busNumber}</h1>
      </div>
      <div className="bus--right">
        <div className="title">
          <h1>{`Armada ${eachBus.busNumber}`}</h1>
          <h2>{eachBus.destination}</h2>
        </div>

        <div className="detail">
          <div className="detail--item">
            <div>
              <img src={TimeProgressThin} alt="Time Progress Logo" />
            </div>
            <div className="detail_content">
              <h3>Last stopped</h3>
              <h3>{eachBus.stopTime}</h3>
            </div>
          </div>
          <div className="detail--item">
            <div>
              <img src={PinLight} alt="Pin Light Logo" />
            </div>
            <div className="detail_content">
              <h3>Location Stopped</h3>
              <h3>{eachBus.stopLocation}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CardBus;

Answer 1

允许多个select离子

function CardBus(props) {
  const [isSelected, setIsSelected] = useState(false);
  let { eachBus, buses, setBuses } = props;

  return (
    <div key={eachBus.key} className={`card ${isSelected ? 'selected' : ''}`} onClick={() => setIsSelected(!isSelected)}>
...
    </div>
  );
}

export default CardBus;

允许单人select

如果将 selected 子逻辑移至父逻辑，可以大大简化代码。

家长代码：

function BusSelector() {
  const [buses, setBuses] = useState([
    {
      busNumber: 1,
      destination: 'Cibiru - Cicaheum',
      stopTime: '09:20 - 09.45',
      stopLocation: 'Jl.Jendral Sudirman',
      isSelected: false
    },
    {
      busNumber: 2,
      destination: 'Cicaheum - Cibereum',
      stopTime: '09:10 - 09.20',
      stopLocation: 'Jl.Soekarno Hatta',
      isSelected: false
    },
  ]);

  const [selectedBus, setSelectedBus] = useState(-1);

  return (
    <div className="bus-selector--container">
      {buses.map((bus) => {
        return <CardBus
          key={bus.busNumber}
          eachBus={bus}
          buses={buses}
          setBuses={setBuses}
          onClick={() => setSelectedBus(bus.busNumber)}
          isSelected={bus.busNumber === selectedBus} />;
      })}
    </div>
  );
}

export default BusSelector;

儿童代码：

function CardBus(props) {
  let { eachBus, isSelected, buses, setBuses, onClick } = props;

  return (
    <div key={eachBus.key} className={`card ${isSelected ? 'selected' : ''}`} onClick={onClick}>
    ...
    </div>
  );
}

export default CardBus;

REACT.JS 如何检测组件只点击了其中一张卡片

REACT.JS how to detect only one of the cards is clicked from a component

components

onclick

reactjs

允许多个select离子

允许单人select