Popover内のRefnull

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

HermitCrab 2020-04-09 00:49.

そのためにrefを使用する必要はありません。入力にautoFocusを追加するだけです。

<input autoFocus placeholder="search" />

keikai 2020-04-09 00:53.

open非同期であるvia状態を制御しているinputRefため、要素を取得しようとすると、状態は更新Properされず、子は作成されません。

にasync / awaitを追加して、機能setStateさせることができます。

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

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

MORE COOL STUFF

ヤナ・ダガー：愛について彼女が言ったことすべて、そして「1人」を見つけるまでの5年間の期間

ジャナ・ダガーは愛を探していることをオープンに語った。このテーマと結婚までの5年間の期間について彼女が言ったことをすべて紹介する。

2023-06-12.

サム・ヒューアン、『アウトランダー』セットから何を取り入れるかを正確に知っている - 「これを着るとジェイミーになったような気分になる」

『アウトランダー』のサム・ヒューアンは最近、自分をスターにした役柄であるジェイミー・フレイザーを偲ぶために、撮影現場から何を取り入れるかを明らかにした。

2023-06-12.

ファブフォー関係者によると、バンドの「最もエキサイティングなパフォーマンス」の1つだった初期のビートルズの曲

「She Loves You」は 1 時間で書かれ、1 日で録音され、ビートルズの曲のキャリアの中で最高のパフォーマンスの 1 つでした。

2023-06-11.

ドリー・パートンは、他の孫が誰も助けようとしない「病気の」祖母を助けました - 彼女は彼女にいたずらもしました

ドリー・パートンと祖母ベッシーには特別な関係がありました。パートンおばあちゃんは重篤でしたが、それでもドリーはいたずらをやめられませんでした。

2023-06-11.

偽物のように聞こえるが、実際には本物である 7 つのハイブリッド動物

交雑種とも呼ばれる雑種動物は、2 つの異なる種または密接に関連した種の子孫です。生息地の違いにより、飼育下でのみ存在するものもあります。

2023-11-16.

蝶のタトゥーのデザイン：象徴性、意味、アイデア

魅惑的な蝶のタトゥーの意味を探ってみましょう。この時代を超越したインクの選択の背後にある象徴性、美しさ、変化を明らかにします。

2023-10-09.

あなたの夢を理解する: 隠された意味を解き明かす

夢の意味の秘密を解き明かしましょう！あなたの夢の深い解釈を探ってください。そこに隠されたメッセージを発見してください。

2023-09-22.

マーベルの『ブラックパンサー』はこれまでで最も重要なアニメ番組になるだろう

Eyes of Wakanda は MCU に直接関連しており、さらに X-Men '97、What If...、Daredevil などの最新情報も掲載されています。

2024-07-03 19:03.

マイケル・C・ホールの妻は誰ですか? モーガン・マクレガーのすべて

マイケル・C・ホールは、2016年に妻のモーガン・マクレガーと結婚しています。マイケル・C・ホールの妻について知っておくべきことはすべてここにあります。

2023-12-31.

ジョーイ・ローレンスの妻は誰ですか? サマンサ・コープのすべて

2022年に『ブロッサム』主演のジョーイ・ローレンスと結婚した女優、サマンサ・コープについて知っておくべきことはすべてここにある。

2023-11-20.

ジェイ・シェティの妻は誰ですか?ラディ・デヴルキア=シェティのすべて

2016年にライフコーチのジェイ・シェティと結婚したラディ・デヴルキア＝シェティについて知っておくべきことはすべてここにある。

2023-09-18.

ジェイソン・モモアが『アクアマンと失われた王国』の最初のティーザー予告編で復帰

ジェイソン・モモアが、ニコール・キッドマンとともにアトランナ女王役で『アクアマンと失われた王国』の最初のティーザー予告編に登場

2023-09-11.

ライティングスキルを向上させる実証済みの 3 つの方法

書くことの利点とそれを助けるための戦略

2022 年には GPT-3 がリリースされるため、ライティングスキルの重要性は低くなるようです。AI を使えば、文章が苦手な人でも質の高い人材を生み出すことができます。

緩やかな浸食: 人々がキャリアを無駄に浪費する方法を明らかにする

今日のペースが速く競争の激しい世界では、個人の成長、経済的安定、そして人生全体の満足度において、個人のキャリアが重要な役割を果たしています。しかし、多くの人は停滞と不満の絶え間ないサイクルに陥っており、職業生活が徐々に消耗していきます。

ポッドキャストが影響力を持つ理由は何ですか?

先週、私はPressGazette（英国のメディアニュースウェブサイト）経由で送信されたプレスリリースに気づきました。この記事は、スカンジナビアのポッドキャストホスティングおよび広告会社である Acast が、ポッドキャスティングにおいて「おそらく最も影響力のある」パブリッシャーのコンソーシアムを率いることになると発表しました。