Question

我正在探索Cx，一个基于React（http://cx.codaxy.com/）的有趣的新框架，我无法弄清楚如何访问组件内的DOM元素。

基本上，我有一个简单的小部件，其中包含一些文本和一个按钮，并且在按钮单击时，我希望将该文本复制到剪贴板，并且因为浏览器＆＃39;安全限制，必须通过选择输入字段内的文本并执行document.execCommand('copy');来完成在React中，我会使用ref，它看起来像这样：

class MyWidget extends React.Component {    
    copyToClipboard = () => {
        // copy text from this.textInput to clipboard...
        // select text
        this.textInput.select();
        try {
            // copy selected text
            document.execCommand('copy');
            this.textInput.blur(); // deselect text
        } catch (err) {
            alert('Please press CTRL/CMD+C to copy');
        }
    }
    render(){
        return (
            <div>
                <span className="inputWithButton">
                <input 
                    ref={(input) => this.textInput = input} 
                    type="text" value="some text..." 
                    onClick={this.copyToClipboard}
                />
                <button onClick={this.copyToClipboard} >
                    Copy to clipboard
                </button>
                </span>
            </div>
        );
    }
}

但是Cx并没有在{＆＃39}中使用refs。自定义组件。有没有其他方法来实现这一目标？

非常感谢任何帮助。

Answer 1

当Cx小部件需要DOM访问时，通常以下列两种方式之一处理：

使用event.target

在copyToClipboard回调方法中，第一个参数是事件。 event.target指向要单击的DOM元素。您可以使用event.target.previousSibling来获取输入，但是如果您更改DOM结构会感觉很糟糕并且可能会中断。

使用React组件

从Cx渲染方法返回React组件是完全没问题的。因此，您可以使用已编写的内容，只需将其包装在Cx小部件中。

render(context, instance, key) {
  return <MyWidget key={key} ... />
}

Cx框架：如何访问Cx中的DOM元素？

1 个答案: