سلام وقت بخیر
ref چه جاهایی کاربرد دارد و چه جاهایی نباید از آن استفاده کرد؟
آیا ما میتوانیم ref برای کامپوننتها استفاده کنیم و مثلا اگر ما کامپوننت Input داشته باشیم و بخواهیم ref را داخل کامپوننت بالا دست آن تعریف کنیم بهترین روش برای اینکه به Node داخل کامپوننت Input دسترسی داشته باشیم چیست؟
برای مثال اگر این کامپوننتهای ما باشند:
// Input.jsx
export default function Input({ type, title, placeholder, ...rest }) {
return (
<input
type={type}
title={title}
placeholder={placeholder}
{...rest}
/>
)
}
// Form.jsx
import { useEffect, useRef } from "react";
import useForm from "../../hooks/useForm";
import Input from "../Input";
export default function LoginForm() {
const [username, setUsername] = useForm('');
const [password, setPassword] = useForm('');
const textInput = useRef(null);
useEffect(() => {
textInput.current?.focus();
});
return (
<form>
<Input
title='username'
placeholder='username'
type='text'
value={username}
onChange={setUsername}
/>
<Input
title='password'
placeholder='password'
type='password'
value={password}
onChange={setPassword}
/>
<button type="submit" className="btn">Login</button>
</form>
)
}
برای چنین فرم ساده ای روش بهینه استفاده از ref چیه؟