React.js如何从组件中单击仅检测其中一张卡片

Question

我尝试在代码上添加单击处理程序，其想法是当我单击第一张卡时，第一张卡当我单击第三张卡时添加新类“ Selected” NAD，否则第三张卡或否则会添加新类”。选定”。当我单击任何卡时，始终选择了第一张卡时存在问题。请帮我。谢谢。

父代码

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

允许多个选择

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;

允许单个选择，

如果将所选子逻辑移至父母，可以简化代码。

父代码：

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;