Как получить 'ref' обернутого элемента в реаги <16? - PullRequest
Новая
       13

Как получить 'ref' обернутого элемента в реаги <16?

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

Мои поля формы обертываются компонентом реакции индивидуально. Этот компонент реакции поступает из стороннего модуля. Моя задача состоит в том, чтобы установить 'ref' и получить этот 'ref' вне этого компонента, чтобы я мог вызвать .focus для него.

Примечание. У меня нет доступа для изменения кода стороннего модуля.

Я не могу использовать .createRef и .forwardRef, так как не имею доступа к коду и, что важно, не использую React 16 +

<WrapperComponent/> Этот компонент имеет поле ввода, в котором мне нужно установить фокус снаружи.

Структура, как показано ниже: 

    MyComponent: // Where I want to access the ref

    render() {
        return (
            <div>
                <WrapperComponent id={id} />
            </div>
        );
    }

Компонент Wrapper (Это сторонний компонент, внутри которого есть поля ввода. Может быть структура такая, как показано ниже): 

    render() {
        return (<input type="text" id={id} />);
    }

Ответы [ 2 ]

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

Чистым способом является расклейка стороннего компонента и выставление ссылки

Один из обходных путей - расширение стороннего компонента: 

class FirstParty extends ThirdParty {
  inputRef = React.createRef();

  render() {
    const inputReactEl = super.render();
    return React.cloneElement(inputReactEl, { ref: this.inputRef });
  }
}

Другой способ - обернуть его: 

class FirstParty extends Component {
  componentDidMount() {
    this.inputDomEl = ReactDOM.findDOMNode(this);
  }

  render() {
    return <ThirdParty {...this.props}/>;
  }
}

В случае использования React 15 createRef ссылок можно изменить на устаревшие ссылки.

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

Вы можете получить ссылку на свой собственный div и написать код, чтобы найти нужный узел среди его дочерних элементов.

Поскольку у вас есть id, вы можете просто window.document.getElementById(id) получить доступ к этому узлу.

...