রিঅ্যাক্টজেএসে, ক্লিপবোর্ডে পাঠ্যটি কীভাবে অনুলিপি করবেন?

Question

আমি রিএ্যাকটিজেএস ব্যবহার করছি এবং যখন কোনও ব্যবহারকারী কোনও লিঙ্ক ক্লিক করেন আমি ক্লিপবোর্ডে কিছু পাঠ্য অনুলিপি করতে চাই।

আমি ক্রোম 52 ব্যবহার করছি এবং আমার অন্য কোনও ব্রাউজার সমর্থন করার দরকার নেই।

এই কোডটি ক্লিপবোর্ডে ডেটা অনুলিপি করার কারণে কেন আসে না তা আমি দেখতে পাচ্ছি না। (কোড স্নিপেটের উত্স একটি রেডডিট পোস্ট থেকে)।

আমি কি এই ভুল করছি? কেউ কি পরামর্শ দিতে পারে যে রিট্যাকস ব্যবহার করে ক্লিপবোর্ডে অনুলিপি প্রয়োগের কোনও "সঠিক" উপায় আছে?

copyToClipboard = (text) => {
  console.log('text', text)
  var textField = document.createElement('textarea')
  textField.innerText = text
  document.body.appendChild(textField)
  textField.select()
  document.execCommand('copy')
  textField.remove()
}

Comments

আপনি কি ক্লিপবোর্ডস.কম বা গিথুব / জজারোক্লিপবোর্ড / জজারোক্লিপবোর্ডের মতো তৃতীয় পক্ষের সমাধানগুলি ব্যবহার করে দেখেছেন ?

— EugZol

@ ইউজজোল কোডটি মোটামুটি ছোট বলে ধরে নিয়ে আমি অন্য নির্ভরতা যুক্ত করার পরিবর্তে কোড লিখতে পছন্দ করি।

— ডিউক ডগল

এই উত্তরগুলোর চেক করুন stackoverflow.com/questions/400212/...

— elmeister

@ এলমেস্টার প্রশ্নটি প্রতিক্রিয়া সম্পর্কিত নির্দিষ্ট

— ডিউক

Answer 1

আমি ব্যক্তিগতভাবে এটির জন্য একটি লাইব্রেরির প্রয়োজন দেখি না। Http://caniuse.com/#feat=clipboard এ দেখে এখন এটি বেশ প্রশস্তভাবে সমর্থিত, তবে আপনি বর্তমান ক্লায়েন্টের কার্যকারিতা বিদ্যমান কিনা তা পরীক্ষা করে দেখার মতো জিনিসগুলি করতে পারেন এবং অনুলিপিটি অনুলিপি করুন তবে এটি অনুলিপি করুন।

import React from 'react';

class CopyExample extends React.Component {

  constructor(props) {
    super(props);

    this.state = { copySuccess: '' }
  }

  copyToClipboard = (e) => {
    this.textArea.select();
    document.execCommand('copy');
    // This is just personal preference.
    // I prefer to not show the the whole text area selected.
    e.target.focus();
    this.setState({ copySuccess: 'Copied!' });
  };

  render() {
    return (
      <div>
        {
         /* Logical shortcut for only displaying the 
            button if the copy command exists */
         document.queryCommandSupported('copy') &&
          <div>
            <button onClick={this.copyToClipboard}>Copy</button> 
            {this.state.copySuccess}
          </div>
        }
        <form>
          <textarea
            ref={(textarea) => this.textArea = textarea}
            value='Some text to copy'
          />
        </form>
      </div>
    );
  }

}

export default CopyExample;

আপডেট: 16.7.0-alpha.0 প্রতিক্রিয়াতে প্রতিক্রিয়া হুক ব্যবহার করে পুনরায় লেখা

import React, { useRef, useState } from 'react';

export default function CopyExample() {

  const [copySuccess, setCopySuccess] = useState('');
  const textAreaRef = useRef(null);

  function copyToClipboard(e) {
    textAreaRef.current.select();
    document.execCommand('copy');
    // This is just personal preference.
    // I prefer to not show the the whole text area selected.
    e.target.focus();
    setCopySuccess('Copied!');
  };

  return (
    <div>
      {
       /* Logical shortcut for only displaying the 
          button if the copy command exists */
       document.queryCommandSupported('copy') &&
        <div>
          <button onClick={copyToClipboard}>Copy</button> 
          {copySuccess}
        </div>
      }
      <form>
        <textarea
          ref={textAreaRef}
          value='Some text to copy'
        />
      </form>
    </div>
  );
}

Comments

এটি সেরা উত্তর। আমাদের পুরানো ব্রাউজারের সমর্থন না লাগলে প্রতিটি ছোট জিনিসটির জন্য প্যাকেজগুলি ব্যবহার করতে দেবদের উত্সাহ দেওয়া উচিত নয়।

— 21

কেবল রেকর্ডের জন্য: এর সাথে একমাত্র সমস্যাটি হ'ল যদি আপনি পৃষ্ঠায় ইতিমধ্যে কিছু পাঠ্য উপাদানটিতে না থাকা পাঠ্যটি অনুলিপি করার চেষ্টা করছেন তবে আপনাকে ডিওএম উপাদানগুলির একটি সেট হ্যাক করতে হবে, পাঠ্যটি সেট করতে হবে, অনুলিপি করতে হবে, এবং এটি পরিষ্কার। এটি খুব ছোট কিছু জন্য কোড প্রচুর। সাধারণত আমি একমত হব যে নিয়মিতভাবে গ্রন্থাগার ইনস্টল করার জন্য ডেভসকে উত্সাহিত করা উচিত নয়।

— ক্রিস্টোফার রনিং

এই বিশেষ সমস্যার জন্য, পাঠ্যটি ইতিমধ্যে পৃষ্ঠায় একটি উপাদান রয়েছে। আপনি যে পৃষ্ঠায় দৃশ্যমান পাঠ্যটি অনুলিপি করতে চান যে কোনও উপাদানটিতে নেই তা সেখানে কী হবে? এটি সম্পূর্ণ আলাদা একটি বিষয় যা এর সমাধান দেখাতে আমি খুশি হব। প্রতিক্রিয়া সহ আপনার কোনও হ্যাক করার দরকার নেই, আপনি কেবল আপনার রেন্ডার ফাংশনে একটি লুকানো উপাদান সরবরাহ করবেন যা পাঠ্যটিও ধারণ করে। অ্যাডহক উপাদান তৈরি করার দরকার নেই।

— Nate

আমি এই টাইপ স্ক্রিপ্ট ত্রুটি পেয়েছি:Property 'select' does not exist on type 'never'

— অ্যালেক্স সি

আমি টাইপ এরর পেয়েছি: পাঠ্যআরিয়াআরএফ.কন্ট্রন্ট.স্লেচ কোনও ফাংশন নয়

— সিউডোজাচ

Answer 2

আপনি যদি ক্লিপবোর্ডে প্রোগ্রামক্রমে ডেটা লিখতে চান তবে এই বোতামে এই সাধারণ ইনলাইন অন্লিক ক্লিক করুন function

onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}

Comments

নেভিগেটর.ক্লিপবোর্ড সমস্ত ব্রাউজার সমর্থন করে না

— প্রেমজিৎ

মনে হচ্ছে এটি 2018 এর প্রধান ব্রাউজারগুলির পক্ষে ভাল সমর্থন করেছে ক্যানিউজ ডটকম

— #

আপনি যে লিঙ্কটি দিয়েছেন তার উপর ভিত্তি করে মনে হচ্ছে এটি কেবল

— সাফারিতে

যেখানে অনুলিপি করতে হবে সেখানে আমার ইউজকেসের পক্ষে সবচেয়ে ভাল কাজ করে যা পৃষ্ঠায় নেই। ধন্যবাদ

— এনজোনাস

আংশিক সমর্থনটি খুব ভাল, সুতরাং বেশিরভাগ ব্যবহারের ক্ষেত্রে এটি সম্পূর্ণরূপে সমর্থিত। এবং যেমনটি উল্লেখ করা হয়েছে, এটি সেরা প্রোগ্রামেটিক সমাধান।

— ড্রয়ার বার

Answer 3

আপনার অবশ্যই উপরে শুভহামের মতো প্যাকেজটি ব্যবহারের পরামর্শ দেওয়ার কথা বিবেচনা করা উচিত তবে আপনি যা বর্ণনা করেছেন তার উপর ভিত্তি করে আমি একটি ওয়ার্কিং কোডেপেন তৈরি করেছি: http://codepen.io/dtschust/pen/WGwdVN?editors=1111 । এটি ক্রোমটিতে আমার ব্রাউজারে কাজ করে, আপনি দেখতে পাচ্ছেন যে আমি এখানে কিছু করেছি যা আপনি মিস করেছেন বা আপনার অ্যাপ্লিকেশনটিতে এমন কিছু বর্ধিত জটিলতা রয়েছে যা এটিকে কাজ করা থেকে বিরত করে।

// html
<html>
  <body>
    <div id="container">

    </div>
  </body>
</html>


// js
const Hello = React.createClass({
  copyToClipboard: () => {
    var textField = document.createElement('textarea')
    textField.innerText = 'foo bar baz'
    document.body.appendChild(textField)
    textField.select()
    document.execCommand('copy')
    textField.remove()
  },
  render: function () {
    return (
      <h1 onClick={this.copyToClipboard}>Click to copy some text</h1>
    )
  }
})

ReactDOM.render(
<Hello/>,
  document.getElementById('container'))

Comments

আপনার সমাধানের চেয়ে কেন প্যাকেজ ভাল?

— ডিউক ডুগল

সম্ভাব্যভাবে আরও ভাল ক্রস ব্রাউজার সমর্থন, এবং বাগ ঠিক করার প্রয়োজনে প্যাকেজের উপর আরও নজর রয়েছে

— ড্রিউ শুস্টার

একটি যাদুমন্ত্র মত কাজ করে. হ্যাঁ. আমি ক্রস ব্রাউজার সমর্থন সম্পর্কে অবাক।

— কার্ল পোকাস

আপনি যেহেতু অ্যাপেনডাইল্ড ব্যবহার করছেন, আপনি যত তাড়াতাড়ি পরে এটি মুছে ফেলছেন তা বিবেচনা না করে যদি পর্দায় ঝাঁকুনির কারণ হয়?

— রবিন্ন্ন

এটি ভাল তবে এটি অ্যান্ড্রয়েডে ক্রোম (72.0) বা অ্যান্ড্রয়েডে এফএফ (63.0) এ কাজ করে না।

— কলিন

Answer 4

সবচেয়ে সহজ উপায় react-copy-to-clipboardহ'ল এনপিএম প্যাকেজটি ব্যবহার করা ।

আপনি নিম্নলিখিত কমান্ড দিয়ে এটি ইনস্টল করতে পারেন

npm install --save react react-copy-to-clipboard

এটি নিম্নলিখিত পদ্ধতিতে ব্যবহার করুন।

const App = React.createClass({
  getInitialState() {
    return {value: '', copied: false};
  },


  onChange({target: {value}}) {
    this.setState({value, copied: false});
  },


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


  render() {
    return (
      <div>

          <input value={this.state.value} size={10} onChange={this.onChange} />

        <CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
          <button>Copy</button>
        </CopyToClipboard>

                <div>
        {this.state.copied ? <span >Copied.</span> : null}
                </div>
        <br />

        <input type="text" />

      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById('container'));

একটি বিস্তারিত ব্যাখ্যা নীচের লিঙ্কে সরবরাহ করা হয়

https://www.npmjs.com/package/react-copy-to-clipboard

এখানে একটি চলমান ঝাঁকুনি আছে ।

Comments

আমার যদি বিপরীতমুখী করার দরকার হয় তবে কি কোনও সমাধান আছে? অর্থাত লেখক একটি ইমেল থেকে পাঠ্য অঞ্চলে রিএক্টজ অ্যাপ্লিকেশনটিতে পাঠ্যটি অনুলিপি করবেন। আমার এইচটিএমএল ট্যাগ ধরে রাখতে হবে না, তবে আমাকে কেবল লাইন ব্রেকগুলি সংরক্ষণ করতে হবে।

— টেক টার্টল

আপনার সম্ভবত onpasteইভেন্টটি প্লাগ করতে হবে

— কোয়েন

আমি যদি এইচটিএমএল টেবিলের সামগ্রীগুলি ক্লিপবোর্ডে অনুলিপি করতে চাই তবে আমি কীভাবে এই প্যাকেজটি ব্যবহার করতে পারি? @ শুভম খাত্রী

— জেন ফ্রেড

Answer 5

আপনি যখন এন.পি.এম. প্যাকেজ ব্যবহার করেন তখন কেন আপনি এমন একক বোতামের মধ্যে সমস্ত পেতে পারেন

<button 
  onClick={() =>  navigator.clipboard.writeText('Copy this text to clipboard')}
>
  Copy
</button>

আমি আশা করি এটি জেরিউরেনাটিকে সহায়তা করবে

Answer 6

কেন কেবল ইভেন্ট ক্লিপবোর্ড ডেটা সংগ্রহের পদ্ধতি ব্যবহার করবেন না e.clipboardData.setData(type, content)?

আমার মতে ক্লিপবোর্ডের ভিতরে ধাক্কা মেরে স্মিথ অর্জনের জন্য সর্বাধিক স্ট্রাইটফোরওয়ার্ড পদ্ধতি, এটি পরীক্ষা করে দেখুন (স্থানীয় কপি করার সময় ডেটা পরিবর্তন করার জন্য আমি এটি ব্যবহার করেছি):

...

handleCopy = (e) => {
    e.preventDefault();
    e.clipboardData.setData('text/plain', 'Hello, world!');
}

render = () =>
    <Component
        onCopy={this.handleCopy}
    />

আমি সেই পথটি অনুসরণ করেছি: https://developer.mozilla.org/en-US/docs/Web/Events/copy

চিয়ার্স!

সম্পাদনা: পরীক্ষার উদ্দেশ্যে, আমি কোডেপেন যুক্ত করেছি: https://codepen.io/dprzygodzki/pen/ZaJMKb

Comments

@ কার্লপোকাস প্রশ্নকর্তা কেবল ক্রোম সমাধান খুঁজছেন

— টেক টার্টল

Chrome সংস্করণ 62.0.3202.94 এ পরীক্ষিত। এটা কাজ করছে। codepen.io/dprzygodzki/pen/ZaJMKb

— দামিয়ান

অলিভারডিক্সন এটি প্রতিক্রিয়া ইভেন্টের ডিফল্ট অবজেক্ট। reactjs.org/docs/events.html

— দামিয়ান

@ দামিয়ানপ্রজিগোডজকি আমি এই জাতীয় লুকানো উপাদানগুলি ঘৃণা করি, বিকাশকারীদের বিভ্রান্ত করার দুর্দান্ত উপায়।

— অলিভার ডিকসন

@ অলিভারডিক্সন আমি আপনাকে অনুভব করি তবে আমি এটি ব্যবহার করা ভাল বলে মনে করি যে কখনও কখনও পদ্ধতিতে বিশেষত ইভেন্টগুলিতে কিছু ডিফল্ট ডেটা প্রয়োগ করা হয়।

— দামিয়ান প্রাইগোডজকি

Answer 7

আপনার কোডটি নিখুঁতভাবে কাজ করা উচিত, আমি এটি একইভাবে ব্যবহার করি। কেবল নিশ্চিত হয়ে নিন যে ক্লিকের ইভেন্টটি যদি কোনও পপ আপ স্ক্রিনের মধ্যে থেকে বুটস্ট্র্যাপ মডেল বা অন্য কোনও কিছুর সূত্রপাত হয় তবে তৈরি উপাদানটিকে সেই মডেলের মধ্যে থাকতে হবে অন্যথায় এটি অনুলিপি করে না। আপনি সর্বদা সেই মডেলের মধ্যে একটি উপাদানটির আইডি দিতে পারেন (দ্বিতীয় প্যারামিটার হিসাবে) এবং এটি getElementById দিয়ে পুনরুদ্ধার করতে পারেন, তারপরে নথির পরিবর্তে সদ্য নির্মিত উপাদানটিকে যুক্ত করুন। এটার মতো কিছু:

copyToClipboard = (text, elementId) => {
  const textField = document.createElement('textarea');
  textField.innerText = text;
  const parentElement = document.getElementById(elementId);
  parentElement.appendChild(textField);
  textField.select();
  document.execCommand('copy');
  parentElement.removeChild(textField);
}

Answer 8

আমি উপরের কয়েকটি হিসাবে খুব অনুরূপ পদ্ধতির গ্রহণ করেছি, তবে এটিকে কিছুটা দৃ concrete়তর করে তুলেছি, আমি মনে করি। এখানে, কোনও প্যারেন্ট উপাদানগুলি ইউআরএল (বা আপনি যে পাঠ্য চান) প্রপস হিসাবে পাস করবেন।

import * as React from 'react'

export const CopyButton = ({ url }: any) => {
  const copyToClipboard = () => {
    const textField = document.createElement('textarea');
    textField.innerText = url;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
  };

  return (
    <button onClick={copyToClipboard}>
      Copy
    </button>
  );
};

Comments

এটি দরকারী ছিল কারণ আমি টেক্সটরিয়ার পরিবর্তে অনুচ্ছেদে ট্যাগ পেতে চেয়েছিলাম

— এহসান আহমাদী

ধন্যবাদ! কেবল ইস্যুটি পাঠ্যক্ষেত্রটি লুকিয়ে

— রাখছে

Answer 9

সেই সমস্ত লোকেরা যারা পাঠ্য ক্ষেত্রের পরিবর্তে ডিআইভি থেকে নির্বাচন করার চেষ্টা করছেন, তাদের কোড এখানে। কোডটি স্ব-ব্যাখ্যামূলক তবে আরও তথ্য চাইলে এখানে মন্তব্য করুন:

     import React from 'react';
     ....

    //set ref to your div
          setRef = (ref) => {
            // debugger; //eslint-disable-line
            this.dialogRef = ref;
          };

          createMarkeup = content => ({
            __html: content,
          });

    //following function select and copy data to the clipboard from the selected Div. 
   //Please note that it is only tested in chrome but compatibility for other browsers can be easily done

          copyDataToClipboard = () => {
            try {
              const range = document.createRange();
              const selection = window.getSelection();
              range.selectNodeContents(this.dialogRef);
              selection.removeAllRanges();
              selection.addRange(range);
              document.execCommand('copy');
              this.showNotification('Macro copied successfully.', 'info');
              this.props.closeMacroWindow();
            } catch (err) {
              // console.log(err); //eslint-disable-line
              //alert('Macro copy failed.');
            }
          };

              render() {
                    return (
                        <div
                          id="macroDiv"
                          ref={(el) => {
                            this.dialogRef = el;
                          }}
                          // className={classes.paper}
                          dangerouslySetInnerHTML={this.createMarkeup(this.props.content)}
                        />
                    );
            }

Answer 10

আপনি অন্য ক্লিপবোর্ডে বর্তমান ইউআরএল অনুলিপি করতে চান তাহলে এখানে অন্য ব্যবহারের কেস:

একটি পদ্ধতি নির্ধারণ করুন

const copyToClipboard = e => {
  navigator.clipboard.writeText(window.location.toString())
}

সেই পদ্ধতিটি কল করুন

<button copyToClipboard={shareLink}>
   Click to copy current url to clipboard
</button>

Answer 11

প্রতিক্রিয়া হুক সহ সেরা সমাধান, এর জন্য বাহ্যিক গ্রন্থাগারের প্রয়োজন নেই

import React, { useState } from 'react';

const MyComponent = () => {
const [copySuccess, setCopySuccess] = useState('');

// your function to copy here

  const copyToClipBoard = async copyMe => {
    try {
      await navigator.clipboard.writeText(copyMe);
      setCopySuccess('Copied!');
    } catch (err) {
      setCopySuccess('Failed to copy!');
    }
  };

return (
 <div>
    <Button onClick={() => copyToClipBoard('some text to copy')}>
     Click here to copy
     </Button>
  // after copying see the message here
  {copySuccess}
 </div>
)
}

নেভিগেটর.ক্লিপ বোর্ড সম্পর্কে আরও ডকুমেন্টেশনের জন্য এখানে চেক করুন , নেভিগেটর.ক্লিপবোর্ড ডকুমেন্টেশন নাভিগোটর.সিপ্লিপবোর্ড এখানে বিপুল সংখ্যক ব্রাউজার দ্বারা সমর্থিত এখানে সমর্থিত ব্রাউজার চেহারা দেখুন

Answer 12

import React, { Component } from 'react';

export default class CopyTextOnClick extends Component {
    copyText = () => {
        this.refs.input.select();

        document.execCommand('copy');

        return false;
    }

    render () {
        const { text } = this.state;

        return (
            <button onClick={ this.copyText }>
                { text }

                <input
                    ref="input"
                    type="text"
                    defaultValue={ text }
                    style={{ position: 'fixed', top: '-1000px' }} />
            </button>
        )
    }
}

Answer 13

আপনি যদি পাঠ্য ক্ষেত্রের পরিবর্তে ডিআইভি থেকে নির্বাচন করতে চান তবে কোডটি এখানে। "কোড" হ'ল মান যা অনুলিপি করতে হবে

import React from 'react'
class CopyToClipboard extends React.Component {

  copyToClipboard(code) {
    var textField = document.createElement('textarea')
    textField.innerText = code
    document.body.appendChild(textField)
    textField.select()
    document.execCommand('copy')
    textField.remove()
  }
  render() {
    return (
      <div onClick={this.copyToClipboard.bind(this, code)}>
        {code}
      </div>

    )
  }
}

export default CopyToClipboard

Comments

এসওর সর্বোত্তম অনুশীলন হ'ল একটি ব্যাখ্যা সহ আপনার কোডটি সম্পন্ন করা। এটা দয়া করে.

— মার্টেনগ্যাচার

Answer 14

এখানে আমার কোড:

import React from 'react'

class CopyToClipboard extends React.Component {

  textArea: any

  copyClipBoard = () => {
    this.textArea.select()
    document.execCommand('copy')
  }

  render() {
    return (
      <>
        <input style={{display: 'none'}} value="TEXT TO COPY!!" type="text" ref={(textarea) => this.textArea = textarea}  />
        <div onClick={this.copyClipBoard}>
        CLICK
        </div>
      </>

    )
  }
}

export default CopyToClipboard

Answer 15

<input
value={get(data, "api_key")}
styleName="input-wrap"
title={get(data, "api_key")}
ref={apikeyObjRef}
/>
  <div
onClick={() => {
  apikeyObjRef.current.select();
  if (document.execCommand("copy")) {
    document.execCommand("copy");
  }
}}
styleName="copy"
>
  复制
</div>

Comments

এই কোডটি কীভাবে কেবল পোস্টিং কোডের চেয়ে সমস্যা সমাধান করে তার একটি ব্যাখ্যা যুক্ত করুন।

— আলেকজান্ডার ভ্যান ওস্টেনরিজক

Answer 16

এটি করার সর্বোত্তম উপায় খুঁজে পেয়েছি। আমি দ্রুততম উপায় বলতে চাই: ডাব্লু 3 স্কুল

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

একটি প্রতিক্রিয়াশীল কার্যকরী উপাদানটির ভিতরে। হ্যান্ডেলকপি নামে একটি ফাংশন তৈরি করুন:

function handleCopy() {
  // get the input Element ID. Save the reference into copyText
  var copyText = document.getElementById("mail")
  // select() will select all data from this input field filled  
  copyText.select()
  copyText.setSelectionRange(0, 99999)
  // execCommand() works just fine except IE 8. as w3schools mention
  document.execCommand("copy")
  // alert the copied value from text input
  alert(`Email copied: ${copyText.value} `)
}

<>
              <input
                readOnly
                type="text"
                value="[e-mail]"
                id="mail"
              />
              <button onClick={handleCopy}>Copy email</button>

</>

প্রতিক্রিয়া ব্যবহার না করা হলে, ডাব্লু 3 স্কুলগুলিতে এই টুলটিপ অন্তর্ভুক্ত করার একটি দুর্দান্ত উপায় রয়েছে: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2

প্রতিক্রিয়া ব্যবহার করা হলে, একটি দুর্দান্ত চিন্তাভাবনা: বার্তাটি সতর্ক করতে একটি Toastify ব্যবহার করুন। https://github.com/fkhadra/react-toastify এটি ব্যবহার করা খুব সহজ লিবিব। ইনস্টলেশনের পরে, আপনি এই লাইনটি পরিবর্তন করতে পারবেন:

 alert(`Email copied: ${copyText.value} `)

যেমন কিছু জন্য:

toast.success(`Email Copied: ${copyText.value} `)

আপনি যদি এটি ব্যবহার করতে চান তবে টোস্টিফাই ইনস্টল করতে ভুলবেন না। টোস্টকন্টেইনার এবং টোস্টস সিএসএস আমদানি করুন:

import { ToastContainer, toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"

এবং রিটার্নের ভিতরে টোস্ট পাত্রে যুক্ত করুন।

import React from "react"

import { ToastContainer, toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"


export default function Exemple() {
  function handleCopy() {
    var copyText = document.getElementById("mail")
    copyText.select()
    copyText.setSelectionRange(0, 99999)
    document.execCommand("copy")
    toast.success(`Hi! Now you can: ctrl+v: ${copyText.value} `)
  }

  return (
    <>
      <ToastContainer />
      <Container>
                <span>E-mail</span>
              <input
                readOnly
                type="text"
                value="[e-mail]"
                id="mail"
              />
              <button onClick={handleCopy}>Copy Email</button>
      </Container>
    </>
  )
}

Comments

আপনার উত্তরটিতে কেবলমাত্র অন্য উত্সের রেফারেন্স রয়েছে তবে নির্দিষ্ট কোনও উত্তর নেই। যদি ডাব্লু 3 স্কুলগুলি সঠিক সমাধান হিসাবে লিঙ্ক করে তবে দয়া করে এটি এখানে টাইপ করুন।

— f.khantsis