按钮禁用，直到 youtube 视频结束 - 反应打字稿答案

【问题标题】：Button disable until youtube video ends- react typescript按钮禁用，直到 youtube 视频结束 - 反应打字稿
【发布时间】：2021-06-24 00:32:15
【问题描述】：

我对打字稿反应还很陌生。我希望我的视频完成，然后才能使用继续按钮。我找到了如何在 javascript 中执行 this，但由于某种原因，它不适用于 react typescript。到目前为止，这是我的代码：

import { Link } from "react-router-dom";
import Container from 'react-bootstrap/Container';

function timeout(delay: number) {
    return new Promise(res => setTimeout(res, delay));
}

export function Video() {
    return (
        <Container className="p-3">
    <div className="alert alert-info" role="alert">
      <h4 className="alert-heading"></h4>
      <p style={{ textAlign: "center" }}>
              <big> <b>  Please watch the video </b> </big>
        <br />
      </p>
      <iframe
        title={"video"}
        width={"560"}
        height={"315"}
        style={{
          marginLeft: "auto",
          marginRight: "auto",
          marginBottom: "40px",
          display: "block",
        }}
              src="https://www.youtube.com/embed/iw5lP63fUxY?autoplay=1&controls=0"
        frameBorder={"0"}
        allow={
          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        }
        allowFullScreen
          />
          <p style={{ textAlign: "center" }}>
              <Link to="/A">
                  <button type="button" className="btn btn-info">
               Continue
      </button>
      </Link>
        </p>
            </div>
        </Container>

  );
}

【问题讨论】：

标签： reactjs typescript button youtube disable

【解决方案1】：

你试过了吗？ https://www.npmjs.com/package/react-player

特别是“onBufferEnd”回调。

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' onBufferEnd={()=>setCanContinue(true)} />

和“继续”按钮：

const [canContinue,setCanContinue] = useState(false)

<button type="button" {canContinue ? "" : "disabled"} className="btn btn-info">

【讨论】：

嗨！非常感谢您的快速回答 - 它确实禁用了该按钮，但在视频播放完毕后并未启用它。我们写了以下内容： export function Video() { const [CanContinue, setCanContinue] = useState(false);然后：
你使用 ReactPlayer 和 onBufferEnd 了吗？
是的，我们做到了，完全按照您的建议。一旦视频开始播放，它确实禁用了该按钮，但是当视频播放完毕后，它仍然处于禁用状态，不允许我们继续。