React: useRef, lai piekļūtu pamatā esošajam DOM

Iedomājieties, ka īpašnieks vēlētos meklēšanas inventāra funkcionalitāti, kas fokusētu kursoru meklēšanas ievades laukā. Šajā rakstā es parādīšu, kā iekodēt šo konkrēto prasību atsevišķā lietotnē, lai jūs varētu koncentrēties uz šo konkrēto funkcionalitāti. Mana sākuma lietotne ir tikai return paziņojums ar fragmentu un tā iekšpusē H1, kas lasa, izmantojot useRef, lai piekļūtu pamatā esošajam DOM. Tā kā es vēlētos parādīt, kā viņi izmanto Ref āķi, lai piekļūtu DOM, es to izmantošu, lai fokusētu kursoru ievades laukā.

import React from "react";
import './App.css';


function App() {
  return (
    <>
    <h1>Izmantojam useRef, lai piekļūtu pamatā esošajam DOM</h1>
    </>
  );
}


export default App;

Tāpēc ļaujiet man sākt, pievienojot ievades lauku. Pievienošu arī pogu.

import React from "react";
import './App.css';


function App() {
  return (
    <>
    <h1>Izmantojam useRef, lai piekļūtu pamatā esošajam DOM</h1>
    <input type="text" />
    <button onClick={focusInput}>
      Fokusēta ievade
    </button>
    </>
  );
}


export default App;

Tagad, kad esmu pievienojis onClick notikumu apstrādes atribūtu, man ir jādefinē fokusa ievades funkcija, lai apstrādātu pogu klikšķus. Vienkāršības labad mans klikšķu apdarinātājs piekļūst tikai veidlapas ievades ref objektam un pēc tam piekļūst fokusēšanas metodei pašreizējā rekvizītā, kas pastāv formas inputRef objektos.

import React from "react";
import './App.css';


function App() {
  const focusInput = () => {
    formInputRef.current.focus();
  }
  return (
    <>
    <h1>Izmantojam useRef, lai piekļūtu pamatā esošajam DOM</h1>
    <input type="text" />
    <button onClick={focusInput}>
      Fokusēta ievade
    </button>
    </>
  );
}


export default App;

Bet kas ir šis objekts un no kurienes tas nāk? Šis objekts ir atgriešanās vērtība useRef āķa izsaukšanai. Tāpēc šajā savas funkcijas atjauninājumā es izsaucu funkciju React User un saglabāju Ref objektu, kas ir vērtība, kas tiek atgriezta no šīs funkcijas izsaukšanas mainīgajam ar nosaukumu formInput ref. Pēc tam iestatiet JSX izteiksmi formā inputRef kā ref atribūta vērtību ievades elementā.

React izveidos ievades elementus DOM mezglu un atveidos to ekrānā. Šis DOM mezgls tiek piešķirts kā atsauces objekta pašreizējā rekvizīta vērtība. Tas dod iespēju piekļūt ievades DOM mezglam un visiem tā rekvizītiem un vērtībām, izmantojot sintakses formu inputRef.current. Tā kā es vēlos piekļūt fokusa funkcijai ievades elementu DOM mezglā, es izmantoju sintakses formu inputRef.current.focus. Tas ļauj man pārvietot fokusu uz ievades lauku, lai tas būtu gatavs ievadīšanai, lietotājam uzklikšķinot, pieskaroties, vai citādi reaģējot uz to. Tagad tas tiek aktivizēts, noklikšķinot uz pogas. Lai apstiprinātu, ka tas darbojas, es saglabāšu visas savas izmaiņas, pārejot uz mana lietotne, kas tiek rādīta pārlūkprogrammā.

import React from "react";
import './App.css';


function App() {
  const formInputRef = React.useRef (null);


  const focusInput = () => {
    formInputRef.current.focus();
  }
  return (
    <>
    <h1>Izmantojam useRef, lai piekļūtu pamatā esošajam DOM</h1>
    <input ref={formInputRef} type="text" />
    <button onClick={focusInput}>
      Fokusēta ievade
    </button>
    </>
  );
}


export default App;

Noklikšķiniet ārpus ievades lodziņa un noklikšķiniet uz fokusa ievades pogas. Lieliski, viss darbojas kā paredzēts. Jūs tikko uzzinājāt par āķa useRef izmantošanu, lai pievienotos DOM (Dokumenta Objekta Modelim) un strādātu ar konkrēta DOM mezgla īpašībām, ko izvēlaties, pamatojoties uz veicamo uzdevumu.