React refs: Невозможно прочитать свойство 'focus' из null

Question

У меня есть такая ситуация в моем приложении: https://codesandbox.io/s/14mq9969j3

Моя цель - иметь возможность сосредоточиться на вводе внутри компонента GrandChildInput, нажав на div в ChildInput.Однако, когда визуализируется ChildInput, значение this.childRef.current равно null, и оно остается таким, пока я не сфокусируюсь на вводе вручную, щелкнув по нему.После этого присваивается значение current.

Вы можете отслеживать это преобразование в консоли.Журнал this.childRef.current появляется один раз, но его значение меняется после ручной фокусировки на вводе, нажав на него.

Моя конечная цель - заставить StyledGrandChildInput работать таким образом, но в качестве промежуточного шага я пытаюсьзаставить работать неустановленный компонент.Я могу достичь этого результата (с неустановленным компонентом) в моем локальном проекте с:

• Реакт 16.4.2
• Styled-Components 3.4.2

Но когда дело доходит до работы в CodeSandbox с версиями, установленными в проекте по ссылке выше, по какой-то причине даже фокусировка на не стилизованном компоненте GrandChildInput не работает.

Как я могу сделатьКогда приложение нажимает на div из ChildInput?

, приложение фокусируется на компоненте GrandChildInput.

Answer 1

Добавить до @ ShubhamKhatri ответа для тех, кто испытывает затруднения при выполнении той же операции, но когда GrandChildInput равен styled-component, а версия styled-component ниже 4.

С его реализацией вы можете получить Uncaught TypeError: _this.childRef.current.handleFocus is not a function.

В этом случае переименуйте свойство ref в стилевом компоненте так, чтобы оно было innerRef следующим образом:

<div
onClick={() => this.childRef.current.handleFocus()}
style={{ border: "1px solid black", padding: 5 }}
>
  click me
  <StyledGrandChildInput
    type="text"
    disabled
    focused
    length={5}
    innerRef={this.childRef} // change
  />
</div>

Answer 2

Когда вы попытаетесь назначить обработчик onClick для div с помощью ref, он попытается немедленно получить доступ к handleFocus из ref, но так как он еще не назначен компоненту ввода.Его значение будет нулевым, и, следовательно, вы получите эту ошибку.

Что касается выводимого значения в консоли, то оно корректно, так как консоль оценивает значение.This answer предоставит более подробную информацию об этом

Итак, чтобы решить вашу проблему, вам нужно вызвать функцию handleFocus, включив другую функцию, чтобы ее оценка выполнялась тольконажмите

<div
    onClick={() => this.childRef.current.handleFocus()}
    style={{ border: "1px solid black", padding: 5 }}
  >
    click me
    <GrandChildInput
      type="text"
      disabled
      focused
      length={5}
      ref={this.childRef}
    />
  </div>

Также, если вам интересно, почему ваш путь не сработал.Это потому, что ничто не привело к повторному вызову метода рендеринга, поэтому правильная функция была назначена onClick после того, как ссылка была назначена и доступна.

Working CodeSandbox