DOM සඳහා useRef කොක් භාවිතා කිරීම React හි

කලින් පාඩම් වලින් එකකදී, අපි සඳහන් කළේ බොහෝ විට refs භාවිතා වන්නේ DOM අංගවලට ප්‍රවේශ වීම සඳහා බව.

Refs ඔබට උදව් වන්නේ, උදාහරණයක් ලෙස, ඔබට අංගයක් මත අවධානය කේන්ද්‍රගත කිරීමට, ස්ක්‍රෝල් කිරීමට හෝ එහි ප්‍රමාණය සහ ස්ථානය ගණනය කිරීමට අවශ්‍ය වූ විට, හෝ එහි ක්‍රම හෝ ගුණාංග භාවිතා කිරීමට අවශ්‍ය වූ විටය, මන්ද එවැනි දේවල් සඳහා React හි අන්තර්ගත ක්‍රම නොමැත.

අපි එය කරන ආකාරය උදාහරණයක් සමඟ නරඹමු. අපි ආදාන ක්ෂේත්‍රයක් සහ බොත්තමක් සහිත සංරචකයක් සාදමු:

App.jsxreturn (
  <div>
    <input />
    <button>focus</button>
  </div>
);

පළමුව, අපි සංරචකයට useRef ආයාත කරමු:

App.jsximport { useRef } from 'react';

සහ සංරචකය තුළ ref ref එකක් සාදමු. එය null අගයකින් ආරම්භ කරමු:

App.jsxconst ref = useRef(null);

බොත්තම මත ක්ලික් කිරීමේ සකසනයක් යොදමු:

App.jsx<button onClick={handleClick}>focus</button>

ආදාන ක්ෂේත්‍රයට ප්‍රවේශ වීම සඳහා, අපගේ ref ref ආදාන ක්ෂේත්‍රයේ ref ගුණාංගයට ලියන්න. මේ ආකාරයෙන්, React මෙම ආදාන ක්ෂේත්‍රය සඳහා DOM නෝඩය සෑදූ විට, එය එහි සබැඳිය ref.current තුළ තබා ගනී සහ අපට ආදාන ක්ෂේත්‍රයේ ක්‍රම භාවිතා කළ හැකිය:

App.jsx<input ref={ref} />

අවසානයේ, ක්ලික් කිරීම සැකසීමේ කාර්යය එකතු කරමු, එවිට බොත්තම ක්ලික් කළ විට, ආදාන ක්ෂේත්‍රය මත අවධානය කේන්ද්‍රගත වේ. දැන් අපට මෙය කළ හැක්කේ ref හරහා ය, එහි අපගේ ආදාන ක්ෂේත්‍රයට සබැඳිය අඩංගු වේ, එහි ක්‍රමයට ප්‍රවේශ වීමෙන් focus:

App.jsxfunction handleClick() {
  ref.current.focus();
}

බොත්තම ඔබා බලන්න සහ එය ආදාන ක්ෂේත්‍රය මත අවධානය කේන්ද්‍රගත කරන බවට විශ්වාස කරන්න.