介绍
在本文中,我们将学习怎样在 reactjs 中把文本复制到剪贴板。
依赖的知识与环境
创建一个 react 项目
首先,用以下命令创建一个 react App。
npx create-react-app platform
然后在 Visual Studio Code 中打开新创建的项目,并使用以下命令安装 Bootstrap:
npm install --save bootstrap
打开 index.js 文件并导入Bootstrap。
import 'bootstrap/dist/css/bootstrap.min.css';
以下命令安装 copy-to-clipboard 库:
npm install save copy-to-clipboard
进入到 src 文件夹,创建一个名为 CopyBoard.js 的新组件,并在此组件中添加以下代码。
import react, { Component } from 'react'
import copy from "copy-to-clipboard";
import './CopyBoard.css';
export class CopyBoard extends Component {
constructor() {
super();
this.state = {
textToCopy: "Copy to Clipboard Demo!",
};
this.handleInputChange = this.handleInputChange.bind(this);
this.Copytext = this.Copytext.bind(this);
}
handleInputChange(e) {
this.setState({
textToCopy: e.target.value,
});
}
Copytext() {
copy(this.state.textToCopy);
}
render() {
const { textToCopy, btnText } = this.state;
return (
<div className="container">
<div class="row" className="hdr">
<div class="col-sm-12 btn btn-info">
Copy to Clipboard Demo
</div>
</div>
<div className="txt">
<textarea className="form-control" placeholder="Enter Text" onChange={this.handleInputChange} />
<br />
<br />
<button className="btn btn-info" onClick={this.Copytext}>
Copy to Clipboard
</button>
</div>
</div>
);
}
}
export default CopyBoard
.txt
{
margin-bottom: 20px;
margin-top: 20px;
}
.hdr
{
margin-top: 20px;
}
import react from 'react';
import logo from './logo.svg';
import './App.css';
import CopyExample from './CopyBoard';
function App() {
return (
<div className="App">
<CopyExample/>
</div>
);
}