Dom 带有React的ClipboardJS，使用document.getElementById（）

最初，我让它工作得很好

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

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

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

从“React”导入React；
导出默认值（道具）=>{
返回(
复制到剪贴板

);
}

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

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

类DashWizardTwoCore扩展组件{
componentDidMount（）{
const btns=document.getElementById（'clip'）；
常量剪贴板=新剪贴板（BTN）；
}
componentDidUpdate（）{
剪贴板上的（'success'，函数（e）{
控制台日志（e）；
});
剪贴板.on（'error'，函数（e）{
控制台日志（e）；
});
}
render（）{
const someCode=“const foo=1”
返回(
}
);
}
}

如果您将代码从剪贴板字段中取出，并放入字段中，则代码可以正常工作。主要是，如何在父组件中使用document.getElementById（）在子组件中查找内容

他们的例子：

---

我调整了您的代码，并创建了

clipboard.js

与React的简单集成

---

这是小提琴：。查看。

我调整了您的代码，并创建了

clipboard.js

与React的简单集成

---

这是小提琴：。请查看。

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

• 您正在绑定

  剪贴板。在
  componentdiddupdate
  中的
  上，由于您没有真正更改触发此事件的任何内容（在
  ClipboardField
  组件中），因此不会在此触发此事件

• 您正在传递

  {this.someCode}

  属性中未定义的

  {this.someCode}

  ，该属性应为

  {someCode}

因此，只需将您的

剪贴板移动到
组件的
上，然后在
新剪贴板的后面安装
，并使用
code={someCode}


--

在React中，无论何时您想要访问组件的实际dom元素，我们都会使用React调用作为引用，我建议您这样做，而不是使用
getElementById
，因为这是“最佳实践”

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

下面是对代码的修改，但改用refs：

我尝试为无状态组件和引用添加react文档的链接，但显然没有足够的“rep”来发布2个以上的链接，无论如何，快速谷歌搜索应该会为您指明正确的方向。
您的代码很好您只是有一些问题：


您正在绑定
剪贴板。在
componentdiddupdate
中的
上，由于您没有真正更改触发此事件的任何内容（在
ClipboardField
组件中），因此不会在此触发此事件

您正在传递
{this.someCode}
属性中未定义的
{this.someCode}
，该属性应为
{someCode}

因此，只需将您的
剪贴板移动到
组件的
上，然后在
新剪贴板的后面安装
，并使用
code={someCode}


--

在React中，无论何时您想要访问组件的实际dom元素，我们都会使用React调用作为引用，我建议您这样做，而不是使用
getElementById
，因为这是“最佳实践”

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

下面是对代码的修改，但改用refs：

我试着为无状态组件和引用添加react文档的链接，但显然没有足够的“rep”来发布2个以上的链接，无论如何，快速谷歌搜索应该会为您指明正确的方向。
成功了！谢谢你的解释！工作！谢谢你的解释！