时间戳

首页 > 解决方案 > 如何创建复制到剪贴板？将数据从 h1 标签复制到输入（反应）

javascript - 如何创建复制到剪贴板？将数据从 h1 标签复制到输入（反应）

问题描述

在我的应用程序中，我有 h1 标签，其中数据来自 API。我想复制 h1 数据并粘贴到输入字段中。我怎样才能做到这一点？谢谢

标签： javascriptreactjs

解决方案

  1. 首先安装 Copy to Clipboard library.https://www.npmjs.com/package/react-copy-to-clipboard。

  2. 然后为标题和复制设置一个状态。

    state = {
 heading: '',
 copied: false,
};

  3. 调用您的 api 并将状态保存在标题中。

    componentDidMount(){
 axios.get('apiurl')
.then((response) =>{
 // handle success
 this.setState({heading:response.value})
})
}

  4. 显示标题标签内的状态。并将副本添加到剪贴板按钮以复制标题状态内的任何内容。

      <h1>{this.state.heading}</h1>

     <CopyToClipboard text={this.state.heading}
       onCopy={() => this.setState({copied: true})}>
       <button>Copy to clipboard with button</button>
     </CopyToClipboard>

  5. 最后但并非最不重要的一点是在里面展示它<input />

     <input type="text" value={this.state.copied ? this.state.heading :null} />

推荐阅读