React自定义组件添加OnClick事件无效，如何实现点击播放YouTube视频？

一、修复onClick事件不生效的问题 #

你的自定义ButtonHorizontal组件没有接收并传递onClick属性到可点击元素上，导致父组件传入的点击事件无法触发。修改buttons.js中的组件代码：

import React from "react";
import classes from "./Buttons.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export function ButtonHorizontal(props) {
  return (
    // 将onClick绑定到外层div，同时添加鼠标指针样式优化交互体验
    <div 
      className={classes.buttonHorizontal}
      onClick={props.onClick}
      style={{ cursor: 'pointer' }}
    >
      <FontAwesomeIcon icon={props.icon} className={classes.icon}/>
      <div className={classes.text}>{props.text}</div>
    </div>
  );
}

二、实现点击自动播放YouTube视频 #

直接使用YouTube的watch格式链接无法实现自动播放，需要改用embed格式链接并添加自动播放参数：

• 替换src为https://www.youtube.com/embed/k2qgadSvNyU?autoplay=1&mute=1
  • autoplay=1：开启自动播放
  • mute=1：受浏览器自动播放政策限制，静音状态下才能自动触发播放；若需要有声播放，需用户手动点击视频内的播放按钮
• 补充allow属性，确保播放权限正常

修改Feature组件中的iframe部分：

{open ? (
  <iframe
    src="https://www.youtube.com/embed/k2qgadSvNyU?autoplay=1&mute=1"
    frameborder="0"
    allow="autoplay; encrypted-media; fullscreen"
    allowfullscreen
    title="video"
    width="640"
    height="360" // 可选，设置视频固定尺寸
  />
) : null}

完整代码示例 #

Feature.js #

import React, { useState } from "react";
import classes from "./Feature.module.css";
import { ButtonHorizontal, ButtonCircular } from "./Buttons";
import { faPlay } from "@fortawesome/free-solid-svg-icons";

function Feature() {
  const [open, setOpen] = useState(false);

  const openVideo = () => {
    setOpen((prev) => !prev);
  };

  return (
    <div> 
      <ButtonHorizontal icon={faPlay} text="Watch Video" onClick={openVideo}/>
      {open ? (
        <iframe
          src="https://www.youtube.com/embed/k2qgadSvNyU?autoplay=1&mute=1"
          frameborder="0"
          allow="autoplay; encrypted-media; fullscreen"
          allowfullscreen
          title="video"
          width="640"
          height="360"
        />
      ) : null}
    </div>
  );
}

export default Feature;

buttons.js #

import React from "react";
import classes from "./Buttons.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export function ButtonHorizontal(props) {
  return (
    <div 
      className={classes.buttonHorizontal}
      onClick={props.onClick}
      style={{ cursor: 'pointer' }}
    >
      <FontAwesomeIcon icon={props.icon} className={classes.icon}/>
      <div className={classes.text}>{props.text}</div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者TFA