TIL 38|フィードバック中のDOMに直接アクセスした場合、ref

場合によっては、応答に直接DOMにアクセスする必要がある.

input/textarea等

特定DOMの大きい時間を入力する必要がある、

特定のDOMにスクロール位置を入力または設定必要がある場合、

.

外部ライブラリ(プレーヤー、グラフ、カロセクションなど)を使用する場合:

最初の例はinputなどに焦点を当てる必要がある
以前はjsの方法を使用していました.
refを通じて反応にアクセスする方法を見てみましょう.

まずどういう意味ですか.
上の図に示すように、inputを入力して「ボタン」(Set Focus)をクリックすると、inputウィンドウの下の円部分が消えます.私たちはボタンを押してもその部分が消えないことを望んでいます.
では、どうすればいいのでしょうか.
jsメソッドでアクセス、document.querySelector(‘input’).focus()
置く方法がある.
しかし、ReactをReactで動作させ、データだけを転送し、Reactにデータの描画を担当させたいと考えています.(それが私たちが反応を使う目的だから!)
したがって、ドキュメントは元の方法です.querySelectorを使用せずに反応器が提供するDOMに直接アクセスする方法ref.
値を入力するたびにフォーカスを使用する場合は、inputでref(reference)を使用して関数を追加します.
方法は理解ではなく、暗記と熟知しているので、どの場所に対応する事項が含まれ、どの場所に関数のパラメータがあるべきかをよく観察してみましょう.このようにしてやっと応用することができます!

returnではrefが使用され、input変数はレンダリング前に一度だけ宣言されます(input;)あなたに作ってあげます.
inputではなくhelloを使うと、上の声明もhelloです.Roのように
そして使用しているアクティビティでは、this.input.focus();書き終わったら終わりだ!

また、追加の一般関数を作成するときに、どこに置くべきかについても説明します.
プロジェクトでは、通常、returnで作成すると、setStateはrenderを実行するたびにrenderが繰り返し表示され、複雑な関数であればrenderが実行されるたびに新しい関数が作成されるため、renderで作成されます.これは「無駄」です.
したがって、関数は除外されます.
使用方法をさらに熟知するために、他の例を見てみましょう.

ちょっと待って.💁🏼 !
component内にrefとsetStateを書かないとfunctional componentを使うのはずっと簡潔です.
このセクションではhooksについて議論し、位置決めでさらに議論します.😉

const Gugudan = () => {
return <div>Hello, functional Component! </div> }