2

我正在探索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在它的自定义组件中使用。有没有其他方法可以实现这一目标？

任何帮助将不胜感激。

4

1 回答 1

1

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

  1. 利用event.target

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

  1. 使用 React 组件

从 Cx 渲染方法返回 React 组件是非常好的。所以你可以使用你已经写的东西，只需要包装在 Cx 小部件中。

render(context, instance, key) {
  return <MyWidget key={key} ... />
}
于 2016-10-24T13:17:49.287 回答