Получить HTMLInputElement из ref в InputText PrimeReact - PullRequest
Новая
       10

Получить HTMLInputElement из ref в InputText PrimeReact

0 голосов
/ 19 января 2019

Я пытаюсь использовать ссылку, чтобы добраться до базового элемента ввода компонента InputText. Я использовал this.textFieldRef = React.createRef() для установки ссылки, а затем атрибут ref={this.textFieldRef} для его подключения. Тем не менее, в componentDidMount я не могу использовать this.textFieldRef.current.select(), потому что select() недоступна для этого объекта. Так или иначе, InputText не возвращает базовый HTMLInputElement.

Кто-нибудь знает, как я могу перейти от ссылки к чему-то, что позволяет мне select() текст в элементе InputText?

Вот мой код, который на самом деле в TypeScript ... 

import * as React from 'react';
import { InputText } from 'primereact/inputtext';

export class ValueCard extends React.Component<{}, {}> {

  textFieldRef: React.RefObject<any> = React.createRef();

  componentDidMount = () => {
    if (this.textFieldRef.current instanceof InputText) {
      this.textFieldRef.current.select();
    }
  }

  render() {
    return = (
      <InputText
        value="test"
        ref={this.textFieldRef}
      />
    );
  }
}

1 Ответ

0 голосов
/ 19 января 2019

Глядя на источник компонента InputText PrimeReact ( источник ), они прикрепляют ссылку на внутренний элемент input к this.element. Это позволяет вам просто добавить .element к вашей ссылке: 

this.textFieldRef.current.element.select();

Я проверил его в этой песочнице, и, похоже, он работает так, как ожидалось: https://codesandbox.io/s/203k7vx26j

...