입력 태그에 직접 참조를 지정하지 않고 내 React 구성 요소 중 하나의 입력 요소에 포커스를 적용 할 수 있습니까?

Question

구성 요소가 다시 렌더링 될 때 텍스트 입력 상자의 초점을 잃고 있습니다. ref (무언가가 here과 같은)를 추가하여 <input> 요소에 포커스를 다시 적용 할 수 있지만 사용자 정의 구성 요소 내에 있기 때문에 <input> 요소에 액세스 할 수 없으면 어떻게해야합니까? 분명히 구성 요소를 편집하거나 완전히 사용하지 않아도되지만 내 텍스트 상자에 포커스를 다시 적용하는 또 다른 방법이 있는지 궁금합니다.

<TextInput>이라는 사용자 지정 구성 요소가 있습니다. 이 구성 요소에 참조를 추가 할 수 있지만 내 구성 요소의 <div>에서 끝나고 내 <TextInput> 요소에 포함 된 <input> 태그가 아닙니다.

내 구성 요소를 수정하지 않고 <input> 내부 요소에 참조를 적용 할 것인지 또는 구성 요소를 다시 렌더링 한 후에 다른 전략을 사용하여 포커스를 다시 적용 할 수 있는지 알려 주시기 바랍니다.

불명확하거나 추가 정보가 필요한 경우 알려주십시오. 시간 내 주셔서 대단히 감사합니다.

Answer 1

올바르게 이해하면 input 요소가 다시 렌더링 될 때 포커스가 사라집니다 (해당 요소의 조상이 다시 렌더링 되었기 때문에).
그 경우는 다음과 같이 할 수 있다면 :

<input ref={ (el) => el.focus() } /> 

때로는이 짧은 지연 잘 작동을 :

<input ref={ (el) => setTimeout(() => el.focus(), 100) } />