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

Question

我正在探索 Cx，一个基于 React (http://cx.codaxy.com/) 的有趣的新框架，但我不知道如何访问其中的 DOM 元素一个组件。

基本上，我有一个简单的小部件，其中包含一些文本和一个按钮，单击按钮时我想将该文本复制到剪贴板，并且由于浏览器的安全限制，这必须通过选择来完成输入字段中的文本并执行 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 没有在其自定义组件中使用 refs。还有其他方法可以实现这一目标吗？

任何帮助将不胜感激。

Answer 1

当 Cx 小部件需要 DOM 访问权限时，通常采用以下两种方式之一进行处理：

使用event.target

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

使用 React 组件

return 从 Cx render 方法响应组件是完全没问题的。所以您可以使用您已经编写的内容，只需将 Cx 小部件包装起来即可。

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

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

Cx framework: How to access a DOM element in Cx?

javascript

reactjs

react-dom

cxjs