Popover 내부의 Ref null

0

Aakash Thakur 2020-04-09 00:43.

팝 오버를 열 때 입력 요소에 자동 초점을 맞추려고합니다. 이를위한 샌드 박스는 다음과 같습니다.https://codesandbox.io/s/green-bash-x6bj4?file=/src/App.js

여기서 문제는 현재 속성이 항상 참조에서 null이라는 것입니다. forwardRef가 도움이 될 수있는 경우입니까? 나는 그것에 대해 잘 모르기 때문에 그것을 게시합니다.

어떤 도움이라도 대단히 감사합니다.

reactjs material-ui popover react-ref

3 answers

1

HermitCrab 2020-04-09 00:49.

이를 위해 ref를 사용할 필요가 없으며 입력에 autoFocus를 추가하기 만하면됩니다.

<input autoFocus placeholder="search" />

1

keikai 2020-04-09 00:53.

open비동기 인 via 상태 를 제어하기 때문에 inputRef요소를 가져 오려고 할 때 상태가 업데이트 Proper되지 않았고 자식이 생성되지 않았습니다.

setState작동하도록 async / await를 추가 할 수 있습니다 .

const handleClick = async event => {
  await setAnchorEl(event.currentTarget);
  inputRef.current.focus();
};

0

ciego 2020-06-27 09:41.

다음과 같이 setState 뒤에 간단히 콜백을 추가 할 수 있습니다.

    this.setState(
      {
        anchorEl: e.currentTarget,
        isPopoverOpen: true,
      },
      () => {
        setTimeout(() => {
          if (this.inputRef.current) {
            return this.inputRef.current.focus();
          }

          return null;
        }, 200);
      }
    );
  };

타임 아웃을 사용하면 팝 오버가 마운트되고 입력이 표시되도록 할 수 있으므로 타임 아웃이 지나면 입력에 초점이 맞춰집니다. async / await를 사용하는 것이 약속에 더 가깝습니다.

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Related questions

MORE COOL STUFF

Jana Duggar: 사랑에 대해 그녀가 말한 모든 것과 '하나'를 찾기 위한 5년의 창

Jana Duggar: 사랑에 대해 그녀가 말한 모든 것과 '하나'를 찾기 위한 5년의 창

Jana Duggar는 사랑에 대한 그녀의 검색에 대해 공개했습니다. 다음은 그녀가 결혼을 위한 5년 창구와 주제에 대해 말한 모든 것입니다.

2023-06-12.

Sam Heughan은 자신이 '아웃랜더' 세트에서 무엇을 취할지 정확히 알고 있습니다.

Sam Heughan은 자신이 '아웃랜더' 세트에서 무엇을 취할지 정확히 알고 있습니다.

'아웃랜더'의 스타 샘 흑한은 최근 자신을 스타로 만든 역할인 제이미 프레이저를 기억하기 위해 세트장에서 무엇을 할 것인지를 밝혔다.

2023-06-12.

Fab Four 내부자에 따르면 밴드의 '가장 신나는 공연' 중 하나였던 초기 비틀즈 노래

Fab Four 내부자에 따르면 밴드의 '가장 신나는 공연' 중 하나였던 초기 비틀즈 노래

'She Loves You'는 한 시간 만에 작곡되고 하루 만에 녹음되었으며, 비틀즈의 경력 중 최고의 공연 중 하나인 비틀즈의 노래였습니다.

2023-06-11.

Dolly Parton은 다른 손자들이 아무도 하지 않을 때 그녀의 '병약한' 할머니를 도왔습니다. 그녀는 또한 그녀에게 장난을 쳤습니다

Dolly Parton은 다른 손자들이 아무도 하지 않을 때 그녀의 '병약한' 할머니를 도왔습니다. 그녀는 또한 그녀에게 장난을 쳤습니다

Dolly Parton과 그녀의 할머니 Bessie는 특별한 관계를 가졌습니다. Parton 할머니는 매우 아팠지만 Dolly는 그녀에게 장난을 쳤습니다.

2023-06-11.

타누키가 어떻게 실제 존재이면서 신화 속 존재일 수 있을까?

타누키가 어떻게 실제 존재이면서 신화 속 존재일 수 있을까?

통통한 배, 장난기 어린 눈, 일본 정원에 돌 조각상으로 나타나는 습관을 가진 타누키는 신화와 현실의 경계를 모호하게 만듭니다.

2025-11-13.

바다 깊은 곳에 숨어 있는 가장 무서운 바다 생물 10종

바다 깊은 곳에 숨어 있는 가장 무서운 바다 생물 10종

바다는 아름다움으로 가득하지만, 지구상에서 가장 무서운 바다 생물들도 숨어 있습니다. 이 동물들 중 다수는 해수면 아래, 어둡고 압력이 높은 심해에 숨어 있습니다.

2025-10-29.

마인크래프트 최고의 검 마법 부여 10가지

마인크래프트 최고의 검 마법 부여 10가지

적대적인 몹과 싸우거나 PvP 시나리오에 대비하고 있다면, 마인크래프트에서 제공하는 최고의 검 마법 부여를 아는 것이 큰 도움이 될 수 있습니다. 검에 마법을 부여하면 더 큰 피해를 입히고, 몹 드랍률을 높이고, 검의 내구도를 연장할 수 있습니다.

2025-10-29.

Marvel의 Black Panther 쇼는 지금까지 가장 중요한 애니메이션 쇼가 될 것입니다

Marvel의 Black Panther 쇼는 지금까지 가장 중요한 애니메이션 쇼가 될 것입니다

Eyes of Wakanda는 MCU에 직접 연결되며 X-Men '97, What If..., Daredevil 등에 대한 업데이트도 제공됩니다.

2024-07-03 19:03.

안나 윈투어, 37년간의 보그 편집장직에서 물러나다 - 그리고 그녀는 사람을 채용합니다!

안나 윈투어, 37년간의 보그 편집장직에서 물러나다 - 그리고 그녀는 사람을 채용합니다!

1988년부터 미국판 보그에 합류한 오랜 편집장은 6월 26일 목요일 아침 직원 회의에서 이 소식을 발표했습니다.

2025-06-27.

케이트 미들턴의 아름다운 사파이어 약혼 반지에 대한 모든 것 (그리고 반지에서 영감을 얻은 왕실 전래품!)

케이트 미들턴의 아름다운 사파이어 약혼 반지에 대한 모든 것 (그리고 반지에서 영감을 얻은 왕실 전래품!)

케이트 미들턴의 약혼 반지는 윌리엄 왕자가 프로포즈하기 전에 다이애나 공주의 소유였던 것으로 유명합니다. 이 역사적인 작품에 대한 모든 정보를 여기에서 확인하세요.

2024-09-01.

라구나 비치 출연진: 그들은 지금 어디에 있나요?

라구나 비치 출연진: 그들은 지금 어디에 있나요?

'라구나 비치'는 2000년대 중반 고등학생 Lauren Conrad, Kristin Cavallari, Stephen Colletti 등의 삶을 따라갔습니다. MTV 리얼리티 시리즈의 출연진이 현재 있는 곳은 다음과 같습니다.

2024-07-15.

작문 실력을 향상시키는 3가지 입증된 방법

글쓰기의 이점과 그렇게 하는 데 도움이 되는 전략

작문 실력을 향상시키는 3가지 입증된 방법

2022년에는 GPT-3가 출시되면서 글쓰기 능력이 덜 중요해진 것 같습니다. AI를 사용하면 글이 서투른 사람들도 양질의 직원을 생성할 수 있습니다.

느린 침식: 사람들이 경력을 낭비하는 방식 공개

느린 침식: 사람들이 경력을 낭비하는 방식 공개

오늘날과 같이 급변하고 경쟁이 치열한 세상에서 경력은 개인의 성장, 재정적 안정 및 전반적인 삶의 만족도에 중요한 역할을 합니다. 그러나 많은 사람들은 침체와 불만족의 끊임없는 순환에 휩싸여 직업 생활에서 점차 쇠퇴하고 있습니다.

팟캐스트가 영향력 있는 이유는 무엇입니까?

팟캐스트가 영향력 있는 이유는 무엇입니까?

지난 주에 저는 PressGazette(영국 언론 뉴스 웹사이트)를 통해 발송된 보도 자료를 보았습니다. 이 기사는 Scandi 팟캐스트 호스팅 및 광고 회사인 Acast가 팟캐스팅에서 "아마도 가장 영향력 있는" 게시자 컨소시엄을 이끌 것이라고 발표했습니다.

Language