带有React的ClipboardJS，使用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 中取出并进入字段，则可以正常工作。主要是，如何在我的父组件中使用document.getElementById（）来查找我孩子的内容？

他们的例子：

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的简单集成。

这里是小提琴：https://jsfiddle.net/mrlew/ehrbvkc1/13/。看看吧。

Answer 2

您的代码很好，您只是遇到一些问题：

• 您在clipboard.on中绑定componentDidUpdate，因为您并未真正更改触发此事件的任何内容（在ClipboardField组件中），因此不会在此处触发。
• 您正在{this.someCode}道具code传递未定义的{someCode}

因此，只需将clipboard.on移至componentDidMount后new Clipboard并使用code={someCode}

https://jsfiddle.net/yy8cybLq/

-

在React中，只要你想访问组件的实际dom元素，我们就会使用反应调用作为refs，我建议你这样做而不是使用getElementById，因为这是“最佳实践”。

然而，无状态组件（如上面的ClipboardField组件）不能包含引用，因此您只需将其更改为普通组件即可。

以下是您的代码的小提示，但改为使用引用：https://jsfiddle.net/e5wqk2a2/

我尝试包含无状态组件和refs的反应文档的链接，但显然没有足够的“rep”来发布超过2个链接，无论如何快速谷歌搜索应该指向正确的方向。