Cx Framework: Как получить доступ к элементу DOM в 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.

2. Использовать компонент React

Прекрасно вернуть компоненты React из метода визуализации Cx. Таким образом, вы можете использовать то, что вы уже написали, просто поместите в виджет Cx.

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