javascript - Cx 框架 : How to access a DOM element in Cx?

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 访问时，通常以以下两种方式之一处理:

1. 使用event.target

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

1. 使用 React 组件

从 Cx render 方法返回 React 组件是完全没问题的。所以您可以使用您已经编写的内容，只需包装在 Cx 小部件中即可。

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