Использование `Clipboard.js` в реакции, выдающей ошибку: первый аргумент должен быть String, HTMLElement, - PullRequest
Новая
       17

Использование `Clipboard.js` в реакции, выдающей ошибку: первый аргумент должен быть String, HTMLElement,

0 голосов
/ 26 марта 2019

Я использую https://github.com/zenorocha/clipboard.js в реактивном проекте и выявляю проблему при его использовании.

Я попытался использовать то, как они объясняют здесь https://github.com/zenorocha/clipboard.js/issues/251

Мне нужно скопировать что-то из input, который предназначен только для чтения.

здесь мой код: 

        import Clipboard from 'clipboard';
        import IconCopy from '@material-ui/icons/FileCopy';

        class CopyClass extends React.Component {

          componentDidMount () {
            const button = this.copyIcon
            const input = this.email

            this.clipboard = new Clipboard(
              button, {
                target: () => input
              }
            )
          }

          componentWillUnmount() {
            this.clipboard.destroy()
          } 

          renderUserCaption () {
            return (
              <div>
                <input 
                  ref={el => this.email = el} 
                  value={this.props.user.email}
                  type="text"
                  readOnly={true}
                />
                {document.queryCommandSupported('copy') && canCopy && (
                  <Tooltip title="Copy this email address">
                    <IconCopy 
                      ref={(el) => this.copyIcon = el}
                    />
                  </Tooltip>
                )}
              </div>
            )
          }

          render () {
            return (
              <div>
                <SomeOtherComponent
                  titleCaption={this.renderUserCaption()}
                >
                  {this.props.children}
                </SomeOtherComponent>
              </div>
            )
          }
        }

И я получаю сообщение об ошибке: 

        Uncaught TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList
            at listen (clipboard.js:736)
            at Clipboard.listenClick (clipboard.js:183)
            at new Clipboard (clipboard.js:151)
            at UserCard.componentDidMount (index.js:107)
            at commitLifeCycles (react-dom.development.js:16227)
            at commitAllLifeCycles (react-dom.development.js:17592)
            at HTMLUnknownElement.callCallback (react-dom.development.js:149)
            at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
            at invokeGuardedCallback (react-dom.development.js:256)
            at commitRoot (react-dom.development.js:17788)
            at completeRoot (react-dom.development.js:19240)
            at performWorkOnRoot (react-dom.development.js:19169)
            at performWork (react-dom.development.js:19077)
            at performSyncWork (react-dom.development.js:19051)
            at requestWork (react-dom.development.js:18920)
            at scheduleWork (react-dom.development.js:18729)
            at Object.enqueueSetState (react-dom.development.js:12457)
            at AsyncComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:375)
            at AsyncComponent._callee$ (index.js:20)
            at tryCatch (runtime.js:62)
            at Generator.invoke [as _invoke] (runtime.js:296)
            at Generator.prototype.(anonymous function) [as next] (http://localhost:4000/static/js/bundle.js:17522:21)
            at step (index.js:79)
            at index.js:79

Где я сделал ошибку?

Обновлен код: и проблема по-прежнему существует, теперь я выбрал саму кнопку 

     <RootRef rootRef={(el) => this.copyIcon = el}>
        <button>
           click me
        </button>
     </RootRef>

Теперь, если я войду в систему this.copyIcon.current - это обычно null.

...