ClipboardJS 与 React，使用 document.getElementById()

Question

最初，我让它运行良好。

然后我做了这个，现在我无法让它工作

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>
    );
  }
}

如果您将代码从 ClipboardField 中取出并放入 Field 中，它就可以工作。主要是，如何在我的 parent 组件中使用 document.getElementById() 来在我的 child 中查找内容？

他们的例子：

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

我调整了您的代码并创建了 clipboard.js 与 React 的简单集成。

这是 fiddle：https://jsfiddle.net/mrlew/ehrbvkc1/13/。看看吧。

Answer 2

您的代码很好，只是有几个问题：

您正在 componentDidUpdate 中绑定 clipboard.on，这不会在此处触发，因为您并没有真正更改触发此事件的任何内容（在 ClipboardField 组件中）。
您在 code 属性中传递 {this.someCode} 未定义应该只是 {someCode}

所以只需将 clipboard.on 移动到 new Clipboard 之后的 componentDidMount 并使用 code={someCode}

https://jsfiddle.net/yy8cybLq/

--

在 React 中，每当您想访问组件的实际 dom 元素时，我们使用 react 调用作为引用，我建议您这样做而不是使用 getElementById，因为这是 "best practice".

但是无状态组件（比如上面的 ClipboardField 组件）不能有 refs，因此您只需要将其更改为普通组件即可。

这是一个 fiddle 与您的代码，但使用 refs 代替：https://jsfiddle.net/e5wqk2a2/

我尝试包括指向无状态组件和引用的反应文档的链接，但显然没有足够的 "rep" 到 post 超过 2 个链接，无论如何快速 google 搜索应该为您指明正确的方向。

ClipboardJS 与 React，使用 document.getElementById()

ClipboardJS with React, using document.getElementById()

dom

reactjs

virtual-dom

clipboard.js