[英]ClipboardJS with React, using document.getElementById()
Originally, I had it working fine. 本来我做的很好。
Then I did this and now I can't get it to work 然后我做到了,现在我无法正常工作
ClipboardField.js 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 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>
);
}
}
If you take the code out of ClipboardField and into Field it works. 如果您将代码从ClipboardField中取出并进入Field,它将起作用。 It's mostly, how do I use document.getElementById() in my parent component to find something in my child?
通常,如何在父组件中使用document.getElementById()在孩子中找到某些东西?
Their examples: 他们的例子:
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18 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-node.html#L16-L17
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19 https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19
I adjusted your code and created a simple integration of clipboard.js
with React. 我调整了代码,并创建了一个
clipboard.js
与React的简单集成。
Here's the fiddle: https://jsfiddle.net/mrlew/ehrbvkc1/13/ . 这是小提琴: https : //jsfiddle.net/mrlew/ehrbvkc1/13/ 。 Check it out.
看看这个。
Your code is fine you just have a few issues: 您的代码很好,只是有几个问题:
clipboard.on
in componentDidUpdate
which won't trigger here since you are not really changing anything (in the ClipboardField
component) that triggers this event. componentDidUpdate
中绑定clipboard.on
在这里不会触发,因为您并没有真正更改触发该事件的任何内容(在ClipboardField
组件中)。 {this.someCode}
in the code
prop which would be undefined should just be {someCode}
code
{this.someCode}
中传递了{this.someCode}
,而该{this.someCode}
应该是{someCode}
So it's just a matter of moving your clipboard.on
to the componentDidMount
right after the new Clipboard
and use code={someCode}
因此,仅需在
new Clipboard
之后code={someCode}
将clipboard.on
移动到componentDidMount
并使用code={someCode}
https://jsfiddle.net/yy8cybLq/ https://jsfiddle.net/yy8cybLq/
-- -
In React whenever you want to access the actual dom element of your component we use what react calls as refs, I would suggest you do this rather than using getElementById
as this is the "best practice". 在React中,只要您想访问组件的实际dom元素,我们都将react调用用作引用,因此建议您不要使用
getElementById
因为这是“最佳实践”。
However stateless components (like your ClipboardField
component above) can't have refs so you just need to change it to be a normal component. 但是无状态组件(例如上面的
ClipboardField
组件)不能具有引用,因此您只需将其更改为普通组件即可。
Here's a fiddle with your code but using refs instead: https://jsfiddle.net/e5wqk2a2/ 这是您的代码的摆弄,但是使用了引用: https : //jsfiddle.net/e5wqk2a2/
I tried including links to the react docs for stateless components and refs but apparently don't have enough "rep" to post more than 2 links, anyways quick google search should point you in the right direction. 我尝试包括指向无状态组件和引用的react docs的链接,但显然没有足够的“ rep”来发布两个以上的链接,无论如何,快速的Google搜索应该为您指明正确的方向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.