Cara menyalin teks ke clipboard menggunakan React.js – Beragampengetahuan
Pada artikel ini, kita akan mempelajari cara menyalin teks ke clipboard menggunakan React.js. Dengan menggunakannya kita dapat menyalin teks apa pun ke clipboard dan menempelkannya di mana saja.
Anda dapat melihat artikel saya sebelumnya di mana kita membahas React.js dan komponen dasarnya melalui tautan di bawah.
Contents
Prasyarat
- Dasar-dasar React.js
- Lingkungan pengembangan terintegrasi Visual Studio Code
- Pengetahuan dasar tentang Bootstrap dan HTML
Buat proyek React.js
Mari kita buat aplikasi React terlebih dahulu menggunakan perintah berikut.
npx create-react-app platformSekarang, buka proyek yang baru dibuat di Visual Studio Code dan instal Bootstrap menggunakan perintah berikut:
npm install --save bootstrap Membuka indeks.js file dan impor ke Bootstrap.
import 'bootstrap/dist/css/bootstrap.min.css';Sekarang, instal copy-to-clipboard perpustakaan menggunakan perintah berikut.
npm install save copy-to-clipboard Pergi ke src Di bawah folder, buat komponen baru dan beri nama CopyBoard.jsdan tambahkan baris berikut ke komponen.
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} ></textarea>
<br />
<br />
<button className="btn btn-info" onClick={this.Copytext}>
Copy to Clipboard
</button>
</div>
</div>
);
}
}
export default CopyBoard Buat file CSS baru dan tambahkan CSS berikut di file tersebut.
.txt
{
margin-bottom: 20px;
margin-top: 20px;
}
.hdr
{
margin-top: 20px;
} Membuka aplikasi.js file dan tambahkan kode berikut:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import CopyExample from './CopyBoard';
function App() {
return (
<div className="App">
<CopyExample></CopyExample>
</div>
);
}
export default App; Sekarang jalankan proyek dan periksa hasilnya.
Masukkan beberapa teks ke dalam kotak teks dan klik tombol.
Teksnya sekarang telah disalin. Rekatkan teks ke Notepad.
menyamaratakan
Pada artikel ini, kita mempelajari cara menyalin teks ke clipboard di aplikasi React.js.
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#Cara #menyalin #teks #clipboard #menggunakan #React.js
