ClipboardJS with React, using 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>
    );
  }
}

如果将代码从剪贴板Field 和 field 中取出。大多数情况下，我如何在父母组件中使用document.getElementById（）在我的孩子中找到东西？

他们的例子：

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

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

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

Answer 1

您的代码很好您只有一些问题：

• 您在componentDidUpdate中绑定clipboard.on，因为您没有真正更改触发此事件的任何东西（在ClipboardField组件中）。
• 您在code Prop中通过{this.someCode}，该Prop不确定，应该是{someCode}

所以这只是将clipboard.on移至new Clipboard之后的componentDidMount并使用code={someCode}

的问题

https://jsfiddle.net/yy8cyblq/

-

在您要访问组件的实际DOM元素时，我们使用React称为Refs的实际DOM元素，我建议您执行此操作，而不是使用getElementById，因为这是"最佳实践"。

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

这是带有您的代码的小提琴，但改为使用参考：https：//jsfiddle.net/e5wqk2a2/

我尝试包括指向无状态组件和参考的React文档的链接，但显然没有足够的" rep"发布2个以上的链接，无论如何，快速Google搜索应该指向正确的方向。

<</p>

Answer 2

我调整了您的代码，并与React进行了简单的clipboard.js集成。

这是小提琴：https：//jsfiddle.net/mrlew/ehrbvkc1/13/。检查一下。