नीचे दिए गए कोड को गतिशील सामग्री (नाम डेटा) को एक क्लिपबोर्ड पर कॉपी करने के लिए डिज़ाइन किया गया था जब एक निश्चित बटन क्लिक किया जाता है।

मेरी समस्या यह है कि क्लिक किए गए बटन के बावजूद केवल अंतिम नाम की प्रतिलिपि बनाई जाती है। उदा. यदि नाम कॉपी करने के लिए क्लिक करें टोनी जो कि सरणी में पहला डेटा है, तो यह टॉम को कॉपी करेगा जो कि json में अंतिम डेटा है परिणाम और सफल संदेश सभी पंक्तियों में गलत तरीके से दिखाया जाएगा।

नीचे स्क्रीनशॉट है

screenshots

कृपया किसी भी कामकाज की सराहना की जाएगी ....

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

<script type="text/babel">
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rec: [
        { id: 1,name: "Tony", Age: "18", gender: "male" },
        { id: 2,name: "John", Age: "21", gender: "female" },
        { id: 3,name: "Luke", Age: "78", gender: "male" },
        { id: 4,name: "tom", Age: "89", gender: "female" }
      ],
copyName: ''
    };


    this.clickToCopy = this.clickToCopy.bind(this);

  }

   clickToCopy(e){
//clickToCopy(e,id){
    this.textArea.select();
    document.execCommand('copy');
    e.target.focus();
    this.setState({ copyName: 'This name has been Copied successfully' });

/*
// ensure that only the selected button will triger copied successfully
    const success = this.state.rec.filter(i => i.id !== id)
    this.setState({ copyName: 'This name has been Copied successfully' });
*/
  };



  render() {


    return (
      <div>

        <div>
          <h3> Records</h3>


          <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>
                {obj.id} {obj.name} - {obj.Age} - {obj.gender}

<div>
        {
         document.queryCommandSupported('copy') &&
          <div>
            <button onClick={this.clickToCopy}>Copy This Name</button> 
            {this.state.copyName}
          </div>
        }
        <form>
          <textarea
            ref={(textarea) => this.textArea = textarea}
            value={obj.name}
          />
        </form>
      </div>


              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

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


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


   </body>
</html>
1
Nancy Mooree 30 नवम्बर 2019, 12:33

1 उत्तर

सबसे बढ़िया उत्तर

आपको प्रत्येक टेक्स्टरेरा को एक अलग रेफरी देने की जरूरत है, और कॉपी कॉपी बटन पर क्लिक करें और कॉपी निष्पादित करें।

<textarea
  ref={input => {
   this[`textArea-${i}`] = input;
  }}
  ...
/>

clickToCopy = (e, id) => {
  this[`textArea-${id}`].select(); // select textarea below clicked button

  document.execCommand("copy");

  this.setState({
    copyId: id // save id of the clicked button
  });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rec: [
        { id: 1, name: "Tony", Age: "18", gender: "male" },
        { id: 2, name: "John", Age: "21", gender: "female" },
        { id: 3, name: "Luke", Age: "78", gender: "male" },
        { id: 4, name: "tom", Age: "89", gender: "female" }
      ],
      copyName: "This name has been Copied successfully",
      copyId: "",
      copied: ""
    };
  }

  clickToCopy = (e, id) => {
    this[`textArea-${id}`].select();

    document.execCommand("copy");

    this.setState({
      copyId: id
    });
  };

  paste = () => {
    navigator.clipboard
      .readText()
      .then(clipText => this.setState({ copied: clipText }));
  };

  render() {
    return (
      <div>
        <div>
          <h3> Records</h3>

          <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>
                {obj.id} {obj.name} - {obj.Age} - {obj.gender}
                <div>
                  {document.queryCommandSupported("copy") && (
                    <div>
                      <button onClick={e => this.clickToCopy(e, i)}>
                        Copy This Name
                      </button>
                      {this.state.copyId === i && this.state.copyName}
                    </div>
                  )}
                  <form>
                    <textarea
                      ref={input => {
                        this[`textArea-${i}`] = input;
                      }}
                      value={obj.name}
                    />
                  </form>
                </div>
              </li>
            ))}
          </ul>
        </div>
        <button onClick={this.paste}>Paste</button>
        {this.state.copied && <p>Copied Text: {this.state.copied}</p>}
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>
0
Junius L. 30 नवम्बर 2019, 11:12