使用document.getElementById（）的帶有React的ClipboardJS

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，它將起作用。 通常，如何在父組件中使用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

您的代碼很好，只是有幾個問題：

• 您將在componentDidUpdate中綁定clipboard.on在這里不會觸發，因為您並沒有真正更改觸發該事件的任何內容（在ClipboardField組件中）。
• 您在code {this.someCode}中傳遞了{this.someCode} ，而該{this.someCode}應該是{someCode}

因此，僅需在new Clipboard之后code={someCode}將clipboard.on移動到componentDidMount並使用code={someCode}

https://jsfiddle.net/yy8cybLq/

-

在React中，只要您想訪問組件的實際dom元素，我們都將react調用用作引用，因此建議您不要使用getElementById因為這是“最佳實踐”。

但是無狀態組件（例如上面的ClipboardField組件）不能具有引用，因此您只需將其更改為普通組件即可。

這是您的代碼的擺弄，但是使用了引用： https : //jsfiddle.net/e5wqk2a2/

我嘗試包括指向無狀態組件和引用的react docs的鏈接，但顯然沒有足夠的“ rep”來發布兩個以上的鏈接，無論如何，快速的Google搜索應該為您指明正確的方向。