select javascript 中对象数组中的一项

Question

我有一个 React 组件

import React, { useState } from 'react';
import { I18nText, EmphasisTag, IconButton, Icon } from '@wtag/react-comp-lib';

const corporateBooking = [
  {
    id: 1,
    video: 'https://www.youtube.com/embed/zKIJ69DWkd0?autoplay=1',
    thumb: 'https://img.youtube.com/vi/zKIJ69DWkd0/0.jpg',
    label: <I18nText id="tutorials.label2" />,
    name: '1. Session - Onboard the customer Organisation / Corporate',
    time: <EmphasisTag type="neutral" size="small" text="30:36" />,
    description: <I18nText id="tutorials.webinar.description_ten" />,
  },
  {
    id: 2,
    video: 'https://www.youtube.com/embed/RmFvY-ZjYHw?autoplay=1',
    thumb: 'https://img.youtube.com/vi/RmFvY-ZjYHw/0.jpg',
    label: <I18nText id="tutorials.label3" />,
    name: '2. Session - Setup Online Booking Tool',
    time: <EmphasisTag type="neutral" size="small" text="21:50" />,
    description: <I18nText id="tutorials.webinar.description_eleven" />,
  },
  {
    id: 3,
    video: 'https://www.youtube.com/embed/izqERVEF1cQ?autoplay=1',
    thumb: 'https://img.youtube.com/vi/izqERVEF1cQ/0.jpg',
    label: <I18nText id="tutorials.label4" />,
    name: '3. Session - Leverage on the  Online Booking Tool',
    time: <EmphasisTag type="neutral" size="small" text="11:15" />,
    description: <I18nText id="tutorials.webinar.description_twelve" />,
  },
  {
    id: 4,
    video: 'https://www.youtube.com/embed/uwU5MLdJvwc?autoplay=1',
    thumb: 'https://img.youtube.com/vi/uwU5MLdJvwc/0.jpg',
    label: <I18nText id="tutorials.label5" />,
    name: '4. Session - Organisational policies and rules',
    time: <EmphasisTag type="neutral" size="small" text="29:51" />,
    description: <I18nText id="tutorials.webinar.description_thirteen" />,
  },
];

const CorporateBooking = () => {
  const [showVideo, setShowVideo] = useState(false);

  return (
    <div>
      {corporateBooking.map(
        ({ video, label, time, description, id, thumb }) => (
          <div key={id} className="grid">
            <div className="col-xlg-3 col-lg-4 col-md-6 col-sm-8 col-xs-12 col-xxs-12 hidden-xs hidden-xxs tutorials__videos">
              <div className="ihover">
                <div className="ihover_image">
                  <img src={thumb} alt="tutorial" className="img-responsive" />
                  <div className="ihover_hover">
                    <div className="ihover_hover--content">
                      <IconButton
                        id={id}
                        icon={<Icon name="youtubeRectangular" />}
                        label="Play"
                        onClick={() => setShowVideo(!showVideo)}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="col-xlg-3 col-lg-4 col-md-6 col-sm-8 col-xs-12 col-xxs-12 hidden-xlg hidden-lg hidden-md hidden-sm tutorials__videos">
              <iframe
                src={video}
                title="WellTravel"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen={true}
              />
            </div>

            <div className="col-xlg-9 col-lg-8 col-md-6 col-sm-4 col-xs-12 col-xxs-12 tutorials__videos">
              <div>
                <a
                  href={video}
                  className="tutorials__videos-link"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {label}
                </a>
              </div>
              <div className="tutorials__time">{time}</div>
              <div className="tutorials__videos-description">{description}</div>
            </div>
            {showVideo ? (
              <div className="col-12" id={id}>
                <iframe
                  src={video}
                  title="WellTravel"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen={true}
                />
              </div>
            ) : null}
          </div>
        ),
      )}
    </div>
  );
};

export default CorporateBooking;

在当前的实施中，每当我点击嵌入式 YouTube 视频中的 IconButton 之一时，所有视频都会同时开始在每个视频下方的 iframe 中播放。但是我只想播放 IconButton 我没有点击过的视频。需要在当前代码库中进行哪些更改才能实现此目的？

Answer 1

对于showVideo状态，您应该使用对象或数组类型。您可以使用每个视频对象的 id 来管理状态。

const [showVideo, setShowVideo] = useState({});

...

<IconButton
  id={id}
  icon={<Icon name="youtubeRectangular" />}
  label="Play"
  onClick={() => {
    setShowVideo({
      ...showVideo,
      [id]: !showVideo[id]
    })
  }}
/>;

...

{showVideo[id] ? (
  <div className="col-12" id={id}>
    <iframe
      src={video}
      title="WellTravel"
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen={true}
    />
  </div>
) : null}

select javascript 中对象数组中的一项

select one item at a time from an array of objects in javascript

javascript

html5-video

reactjs