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

Question

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

Я пытаюсь использовать ссылку, чтобы добраться до базового элемента ввода компонента 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}
      />
    );
  }
}

2

reactjs primereact

Источник

user383737 18 янв '19 в 23:25

1 ответ

Другие вопросы по тегам reactjs primereact

user2791947 18 авг '20 в 17:12 2020-08-18 17:12 · Answer 1 · 2020-08-18 17:12

Может быть, вы могли бы попробовать использовать react-dom библиотека:

ReactDOM.findDOMNode(this.textFieldRef.current).querySelector('input');

1

Источник

user2791947 18 авг '20 в 17:12

user2921244 18 янв '19 в 23:42 2019-01-18 23:42 · Answer 2 · 2019-01-18 23:42

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

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

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