时间戳

首页 > 解决方案 > 反应js：不复制值，即使组件的状态是正确的

javascript - 反应js：不复制值，即使组件的状态是正确的

问题描述

我正在从一个名为“react-copy-to-clipboard”的反应插件实现。

我的组件如下所示：

import React from "react";
import { FiCopy, FiDownload } from "react-icons/fi";
import { CopyToClipboard } from "react-copy-to-clipboard";

class PlayerCaption extends React.Component {
  constructor(props) {
    super(props);
    this.downloadVid = this.downloadVid.bind(this);
    this.onCopy = this.onCopy.bind(this);
    this.state = {
      copied: false,
      value: "default text"
    };
  }
  downloadVid() {
    this.props.dwn_url();
  }

  onCopy = () => {
    this.setState({ copied: true });
  };

  render() {
    return (
      <div className="caption">
        <p className="video-buttons">
          <CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
            <button type="button" id={this.props.id}>
              <FiCopy size={30} />
            </button>
          </CopyToClipboard>
          {this.state.copied ? <span>Copied!</span> : null}
          <button type="button" onClick={this.downloadVid} id={this.props.id}>
            <FiDownload size={30} />
          </button>
        </p>
      </div>
    );
  }
}

export default PlayerCaption;

我的道具具有正确的值，并且“this.state.copied”标志改变了它的状态——但我看不到任何文本被复制到剪贴板。我按照这个codepen来实现（插件）：[ https://codepen.io/nkbt/pen/eNPoQv?editors=0010]

我的实施有什么不正确的？我怎样才能在香草 JS 中做到这一点？

标签： javascriptreactjsclipboard

解决方案

你是在生产环境还是开发环境？对于生产，剪贴板仅支持通过 HTTPS 提供的页面。确保你在那里有工作。

推荐阅读