如何使每个按钮下拉显示单击的视频？ ReactJS

Question

我正在将 props 传递到 Buttons.jsx 文件。每个按钮都会下拉一个视频。我的问题是，当我单击一个按钮时，所有视频都会出现。我希望只有被点击的特定视频才会显示。

这是仓库的链接

https://noahfarinas.github.io/stretching/

提前致谢！

Buttons.jsx

import { useState } from "react";
import ReactPlayer from "react-player";

export const Buttons = (props) => {
  const { content } = props;
    const [showVideo,setShowVideo] = useState(false);
    
    const handleOnClick = () =>  setShowVideo(true); 

   

  return (
    <div className="buttonContainer">
      {content.map((item) => (
        <div className="buttonSpace">
        
            <button id="btn" onClick={handleOnClick}>{item.title}</button>
            {showVideo ? <ReactPlayer url={item.embed} /> : null}    
         
        </div>
      ))}
    </div>
  );
};

export default Buttons;



**App.js**


import "./App.css";
import Search from "./Search";
import TitleView from "./TitleView";
import Buttons from "./Buttons";

function App() {
  const TITLE = "Stretches";

  const DATA = [
    {
      area: "upper-back",
      video: "https://www.youtube.com/watch?v=bTn89EBKJdM",
    },

    {
      area: "mid-back",
      video: "https://www.youtube.com/watch?v=VnDuWC40egg",
    },

    {
      area: "lower-back",
      video: "https://www.youtube.com/watch?v=N-xqKx8oshs",
    },

    {
      area: "hips",
      video: "https://www.youtube.com/watch?v=nLuvQCTPrcY",
    },

    {
      area: "calves",
      video: "https://www.youtube.com/watch?v=37GHTaoknfw",
    },

    {
      area: "chest",
      video: "https://www.youtube.com/watch?v=NePr1XKRTLU",
    },

    {
      area: "glute",
      video: "https://www.youtube.com/watch?v=eRCpceBhcm0",
    },

    {
      area: "foot",
      video: "https://www.youtube.com/watch?v=AXSj_5pBAKw",
    },

    {
      area: "forearm",
      video: "https://www.youtube.com/watch?v=Ayhu7TzNGSQ",
    },

    {
      area: "it band",
      video: "https://www.youtube.com/watch?v=i6Psvd81Hyc",
    },

    {
      area: "hamstring",
      video: "https://www.youtube.com/watch?v=pJUwEBgxWoE",
    },

    {
      area: "tricep",
      video: "https://www.youtube.com/watch?v=SaZK9vlSmHI",
    },

    {
      area: "lat",
      video: "https://www.youtube.com/watch?v=6V5tSn9oEJg",
    },
  ];

  const BUTTONDATA = [
    {
      title: "back",
      embed: "https://www.youtube.com/watch?v=buF1v8aiTvM",
    },

    {
      title: "legs",
      embed: "https://www.youtube.com/watch?v=UIRTPXj1Q1U",
    },

    {
      title: "upper-body",
      embed: "https://www.youtube.com/watch?v=Kpd9ik93Sxk",
    },

    {
      title: "hips",
      embed: "https://www.youtube.com/watch?v=j42sLnoMkrA",
    },
  ];

  return (
    <div className="App">
      <TitleView headline={TITLE} />
      <Search placeholder="What hurts..." data={DATA} />
      <Buttons content={BUTTONDATA} />
    </div>
  );
}

export default App;

Answer 1

这个问题可以通过两种方式解决。一种方法是在 app.js 中的 BUTTONDATA 上有一个 map，并为数组的每个项目呈现单独的 组件。这样，每个 Button 组件将拥有自己的状态，并且在单击按钮时仅显示自己的内容。
另一种方法是为 BUTTONDATA 中的每个数组项都有一个布尔属性。然后您可以通过以下方式修改您的 组件：

Button.js

import { useEffect, useState } from "react";
import ReactPlayer from "react-player";

const Buttons = (props) => {
  const { content } = props;
  const [visibilityChanged, setVisibiltyChanged] = useState(false);

  useEffect(() => {}, [visibilityChanged]);

  const handleOnClick = (index) => () => {
    content[index].isVisible = !content[index].isVisible;
    setVisibiltyChanged(!visibilityChanged);
  };

  return (
    <div className="buttonContainer">
      {content.map((item, index) => (
        <div className="buttonSpace" key={index}>
          <button id="btn" onClick={handleOnClick(index)}>
            {item.title}
          </button>
          {item.isVisible ? <ReactPlayer url={item.embed} /> : null}
        </div>
      ))}
    </div>
  );
};

export default Buttons;

和 app.js 中将有以下更改：
App.js

const BUTTONDATA = [
    {
      title: "back",
      embed: "https://www.youtube.com/watch?v=buF1v8aiTvM",
      isVisible: false
    },

    {
      title: "legs",
      embed: "https://www.youtube.com/watch?v=UIRTPXj1Q1U",
      isVisible: false
    },

    {
      title: "upper-body",
      embed: "https://www.youtube.com/watch?v=Kpd9ik93Sxk",
      isVisible: false
    },

    {
      title: "hips",
      embed: "https://www.youtube.com/watch?v=j42sLnoMkrA",
      isVisible: false
    }
  ];

这里是我创建的代码沙箱，用于在单击按钮时切换视频。