[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ずつ増加する.Reference
この問題について([react]userRefの使用), 我々は、より多くの情報をここで見つけました https://velog.io/@jiiyoung/React-useRef로-원하는-DOM-사용하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol