Plug-in-Einführung in die React-Funktion zum Kopieren und Einfügen

In diesem Artikel wird hauptsächlich der Beispielcode zum Kopieren von React in die Zwischenablage vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor und werfen einen Blick darauf.

Dieser Artikel stellt das Plug-in „Copy-to-Clipboard“ vor, mit dem React in die Zwischenablage kopiert werden kann wie folgt:

Siehe API-Dokumentation

Installieren

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

Verwenden Sie

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


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


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


 render() {
  return (
   <p>
    <h1>CopyToClipboard</h1>

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

    <CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
     <span>Copy to clipboard with span</span>
    </CopyToClipboard> 

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


    {this.state.copied ? <span style={{color: &#39;red&#39;}}>Copied.</span> : null}

    <br />

    <textarea style={{marginTop: &#39;1em&#39;}} cols="22" rows="3" />

   </p>
  );
 }
});

const appRoot = document.createElement(&#39;p&#39;);

appRoot.id = &#39;app&#39;;
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

Das obige ist der detaillierte Inhalt vonPlug-in-Einführung in die React-Funktion zum Kopieren und Einfügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!