چطور در ReactJS بعد از رندر کردن، روی یک فیلد ورودی فوکوس کنیم؟

سلام! برای اینکه بعد از رندر شدن یه کامپوننت توی ری‌اکت روی یک فیلد ورودی (input) فوکوس کنی، باید از یه ref استفاده کنی.
با کمک ref می‌تونی به یه المان DOM دسترسی پیدا کنی و بعد از اینکه کامپوننت رندر شد، به اون المان فوکوس بدی.

قدم اول:

یک ref برای اینپوت (input) مدنظرت ایجاد کن

استفاده از useEffect برای فوکوس:

حالا با استفاده از useEffect کاری کن که بعد از اینکه کامپوننت رندر شد، به input فوکوس داده بشه:

 useEffect(() => {
inputRef.current.focus();
}, []);

این کد باعث می‌شه که بعد از هر بار رندر شدن کامپوننت، اولین باری که این کد اجرا می‌شه، input فوکوس بگیره..

اتصال ref به input:
در نهایت، باید ref رو به input وصل کنی:

return (
<input ref={inputRef} type="text" />
)}

export default MyComponent;

توضیح خلاصه:

این روش با استفاده از useRef و useEffect انجام می‌شه. وقتی که کامپوننت رندر شد (یا آپدیت شد)، useEffect اجرا می‌شه و از طریق inputRef به input دسترسی پیدا می‌کنیم و روش فوکوس می‌ذاریم. این راهکار خیلی معمول و کارآمده و توی خیلی از پروژه‌های ری‌اکتی استفاده می‌شه.

امیداورم که مورد استفاده قرار بگیره. پیروز باشید.