ClipboardJS mit React, mit document.getElementById()

Question

Ursprünglich hatte ich es funktioniert gut.

Dann habe ich diese und jetzt kann ich es nicht

ClipboardField.js

import React from 'react'; 

export default (props) => { 

    return(
    <div id="clip" data-clipboard-text={props.code} onClick={props.onClick}> 
     <p> Copy to clipboard.</p> 
    </div> 
); 
} 

Field.js

class DashWizardTwoCore extends Component { 

    componentDidMount(){ 
    const btns = document.getElementById('clip'); 
    const clipboard = new Clipboard(btns); 
    } 

    componentDidUpdate() { 
    clipboard.on('success', function(e) { 
     console.log(e); 
    }); 
    clipboard.on('error', function(e) { 
     console.log(e); 
    }); 
    } 


    render(){ 

    const someCode = "const foo = 1" 

    return (
     <div> 
     <ClipboardField code={this.someCode} /> } 
     </div> 
    ); 
    } 
} 

zu arbeiten, wenn man das nehmen Code aus ClipboardField und in Feld es funktioniert. Es ist meistens, wie verwende ich document.getElementById() in meiner Elternkomponente, um etwas in meinem Kind zu finden?

Ihre Beispiele:

https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18

https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17

https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19

Answer 1

Der Code ist in Ordnung Sie nur ein paar Probleme haben:

• Sie clipboard.on in componentDidUpdate verbindlich sind, die hier nicht auslösen, da Sie nicht wirklich etwas zu ändern (in der ClipboardField Komponente), die dieses Ereignis auslöst .
• Du {this.someCode} in der code prop vorbei, die gerade nicht definiert werden würde {someCode}

sein sollte, es ist also nur eine Frage Ihrer clipboard.on zum componentDidMount direkt nach dem new Clipboard bewegen und verwenden code={someCode}

https://jsfiddle.net/yy8cybLq/

-

In Reagieren, wann immer Sie auf das tatsächliche dom-Element Ihrer Komponente zugreifen möchten, verwenden wir reaktive Aufrufe als Refs. Ich würde vorschlagen, dass Sie dies tun, anstatt getElementById zu verwenden, da dies die "beste Vorgehensweise" ist.

Allerdings können statusfreie Komponenten (wie Ihre ClipboardField Komponente oben) keine Referenzen haben, so dass Sie sie nur ändern müssen, um eine normale Komponente zu sein.

Hier ist eine Geige mit Ihrem Code ist aber Refs statt mit: https://jsfiddle.net/e5wqk2a2/

Ich habe versucht, mit Links zu dem docs für staatenlos Komponenten und Refs reagiert aber anscheinend nicht genug „rep“ mehr als 2 Links zu veröffentlichen, wie auch immer schnelle Google-Suche sollte Sie in die richtige Richtung zeigen.

Answer 2

ich Ihren Code angepasst und erstellt eine einfache Integration von clipboard.js mit React.

Hier ist die Geige: https://jsfiddle.net/mrlew/ehrbvkc1/13/. Hör zu.