[react]userRefの使用

必要なDOMをuserefとして使用

反応で使用される項目では、DOMを直接使用する必要がある場合がある.従って、反応にrefを用いる.関数型素子でrefを使用する場合はuserefというhook関数を使用します.
userefで管理する値は変わりますが、構成部品は再レンダリングされません.
クラス構成部品のreact.createRef()またはコールバック関数として使用します.
使い方は簡単です.import React, {useState, useRef} from 'react'; UseRefマウントconst nameInput = useRef();オブジェクトを作成し、userefを呼び出します.

<input name="name" placeholder="이름" onChange={onChange} value={name} ref = {nameInput} />

これを所望のDOM(refと称する)に設定、以降このDOMを選択する場合、

const onReset = () => { 
        setInputs({
            name: '',
            nickname: '',   
        });
        nameInput.current.focus();
    };

nameInput.current.focus();ウォンの仕事が終われば終わりだ.

userefを使用して構成部品に変数を作成するには

userefは、DOMの選択に加えて、コンポーネントで表示および変更可能な変数を管理する機能を有する.このセクションでは、userefで管理されている値は変更されますが、構成部品は再レンダリングされません.

import React, { useRef } from 'react';
import UserList from './UserList';

function App() {
  const users = [
    {
      id: 1,
      username: 'DevRappers',
      email: '[email protected]'
    },
    {
      id: 2,
      username: 'tester',
      email: '[email protected]'
    },
    {
      id: 3,
      username: 'liz',
      email: '[email protected]'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
    nextId.current += 1;
  };
  return <UserList users={users} />;
}

export default App;

const nextId = useRef(4);
  const onCreate = () => {
    nextId.current += 1;
  };

userefを使用する場合、数値パラメータを入力すると、この値はです.現在の既定値になります.nextId.current += 1;電流は1ずつ増加する.