javascript - Errors with clipboard.js in React component? - Stack Overflow

admin管理员组

文章数量:1414614

I’m trying to use clipboard.js in a React ponent, and it causes my devserver to start failing with the Node error: ReferenceError: Element is not defined at Object.<anonymous> (/mnt/home/me/code/board/webapp/node_modules/matches-selector/index.js:6:13)

I initialize the clipboard in ponentDidMount but am still getting this error. I actually think the error may have something to do with my import, because even when I don’t actually initialize the clipboard (but include the import) I get the error. Does anyone have an idea what I might be doing wrong?

Relevant code (styling excluded):

import React, { Component } from 'react';
import Clipboard from 'clipboard';

export default class CodeSnippet extends Component {
    constructor(props) {
        super(props);
    }

    ponentDidMount() {
        new Clipboard('.copyButton', {
            target: () => document.getElementById('snippet')
        });
    }

    render() {
        return (      
            <div style={styles.snippetCopy}>
                <div id="snippet" style={styles.snippet}>
                    {'this text will copy'}
                </div>
                <button
                    className={"copyButton"}
                    id="clipper"
                    data-clipboard-text='snippet'
                    style={styles.buttonStyle}
                    text={'Copy code'}>
                </button>
            </div>
        );
    }
}

I’m trying to use clipboard.js in a React ponent, and it causes my devserver to start failing with the Node error: ReferenceError: Element is not defined at Object.<anonymous> (/mnt/home/me/code/board/webapp/node_modules/matches-selector/index.js:6:13)

I initialize the clipboard in ponentDidMount but am still getting this error. I actually think the error may have something to do with my import, because even when I don’t actually initialize the clipboard (but include the import) I get the error. Does anyone have an idea what I might be doing wrong?

Relevant code (styling excluded):

import React, { Component } from 'react';
import Clipboard from 'clipboard';

export default class CodeSnippet extends Component {
    constructor(props) {
        super(props);
    }

    ponentDidMount() {
        new Clipboard('.copyButton', {
            target: () => document.getElementById('snippet')
        });
    }

    render() {
        return (      
            <div style={styles.snippetCopy}>
                <div id="snippet" style={styles.snippet}>
                    {'this text will copy'}
                </div>
                <button
                    className={"copyButton"}
                    id="clipper"
                    data-clipboard-text='snippet'
                    style={styles.buttonStyle}
                    text={'Copy code'}>
                </button>
            </div>
        );
    }
}

• javascript
• reactjs
• ponents
• clipboard.js

Share Improve this question Follow asked Jul 7, 2016 at 21:34 user3802348user3802348 2,6021111 gold badges3838 silver badges5151 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can't require clipboard.js if you're doing server side rendering. It's annoying but instead of installing via npm, they suggest including the script manually like this:

<script src="https://cdn.jsdelivr/clipboard.js/1.5.12/clipboard.min.js"></script>

https://github./zenorocha/clipboard.js/issues/157

I created a fiddle updating your code. It's a suggestion of integrating clipboardjs and React, using ref's and clipboardjs' text function.

Check here: https://jsfiddle/mrlew/L54ky6hj/

本文标签： javascriptErrors with clipboardjs in React componentStack Overflow