React useRef Kullanımı

React useRef Kullanımı

React Ref Nedir ?

React kullanırken ref kullanmak durumunda kalabiliriz. Ref’ler , dom elemanına Javascript’deki selectorlar gibi (getElementById,getByClassName) erişmemizi sağlayan yapılardır.

useRef Örnek Kullanım

Aşağıdaki örnekte input elementine ref vererek butona tıklanınca inputa ait özellikleri alıp (value,clientWidth,offsetWidth …vb) console yazdırıyoruz.

import React, { useRef} from "react";
export default function App() {
const inputName = useRef();
const mesajVer = () => {
console.log(inputName.current.clientWidth);
console.log(inputName.current.value.toUpperCase());
};
return (
 <div className="App">
<input type="text" ref={inputName} />
<button onClick={mesajVer}> Tıkla </button>
</div>
)}

Herkese İyi Çalışmalar Dilerim.