Доступ к методам компонента в React

Я использую компонент под названием реагировать-ввод-авторазмер. Проблема, с которой я столкнулся, заключается в том, что он не изменит размер ввода при изменении размера окна просмотра, поэтому я не хочу вручную подключаться к методам компонента и запускать copyInputStyles() и updateInputWidth().

Довольно новичок в React, поэтому не знаю, как этого добиться. Вы можете открыть ввод через inputRef, но это мне не поможет, нет?

Мой текущий сокращенный тестовый пример выглядит так, буду рад любым указателям на то, как запускать методы компонентов.

    import React from 'react';
    import styled from '@emotion/styled';
    import AutosizeInput from 'react-input-autosize';
    import {throttle} from 'lodash';


    const StyledAutosizeInput = styled(AutosizeInput)`
      max-width: 100vw;
    `;

    export default class signUp extends React.Component {
      constructor (props) {
        super(props);
        this.inputRef = React.createRef();
      }

      componentDidMount() {
        console.info(this.inputRef); // outputs input node
        window.addEventListener('resize', this.resize);
        this.resize();
      }

      componentWillUnmount() {
        window.removeEventListener('resize', this.resize);
      }

      resize = throttle(() => {
        console.info('force resize');
      }, 100);

      render() {
        return (
          <StyledAutosizeInput
            inputRef = {node => this.inputRef = node}
          />
        );
      }
    }

reactjs

11.06.2019 14:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

152

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обратный вызов inputRef = {node => this.inputRef = node}относится к элементу ввода html, а не компонент AutosizeInput. Передайте ссылку через реквизит ref, чтобы получить доступ к методам компонента.

...

resize = throttle(() => {
    if (this.inputRef.current) {
      this.inputRef.current.copyInputStyles()
      this.inputRef.current.updateInputWidth()
    }
  }, 100);

  render() {
    return (
      <StyledAutosizeInput
        ref = {this.inputRef}
      />
    );
  }

Ха-ха, я на самом деле пытался с ref раньше, но после проверки вывода я даже не пытался запустить метод, поскольку они там не появлялись. Спасибо!

— 11.06.2019 15:07

11.06.2019 14:41