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

Question

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

Answer 1

1. 首先安装“复制到剪贴板”库。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} />