از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش تنظیم فوکوس روی عنصر بعد از رندر با تنظیم فوکوس ReactBy روی به عنوان یک عنصر، کاربر را به آرامی به قسمت ورودی مورد انتظار بعدی هدایت می کنیم و تجربه مرور بهتری را با حدس و گمان کمتر به او می دهیم. در این مقاله روش تنظیم تمرکز را یاد خواهیم گرفت روی یک عنصر پس از رندر کردن برنامه React یا یک جزء React. که در…
سرفصلهای مطلب
معرفی
با تنظیم تمرکز روی به عنوان یک عنصر، کاربر را به آرامی به قسمت ورودی مورد انتظار بعدی هدایت می کنیم و تجربه مرور بهتری را با حدس و گمان کمتر به او می دهیم.
در این مقاله روش تنظیم تمرکز را یاد خواهیم گرفت روی یک عنصر پس از رندر کردن برنامه React یا یک جزء React.
در HTML سنتی، تنظیم یک عنصر برای تمرکز با استفاده از آن آسان بود autofocus ویژگی در ما <input> تگ که یک ویژگی بولی است و به طور پیش فرض روی آن تنظیم شده است false. به مرورگر دستور می دهد که تمرکز کند روی آن فیلد ورودی خاص، و کاربر می تواند بلافاصله شروع به وارد کردن مقادیر کند:
<form>
<input type="text" autofocus> // Will focus
<input type="text"> // Won't focus
</form>
این در برنامه های React ما نیز کار خواهد کرد. با این حال، زمانی که می‌خواهیم تمرکز کنیم روی یک عنصر پس از رندر کردن با کنترل برنامه‌ای بیشتر – می‌توانیم از آن استفاده کنیم useEffect() hook در اجزای عملکردی و componentDidMount() روش چرخه عمر در اجزای کلاس
روش تنظیم فوکوس روی عنصر پس از رندر در اجزای عملکردی
پیش از این، قبل از معرفی قلاب‌های React، نمی‌توانستیم چنین عملیاتی را با اجزای Functional انجام دهیم.
از زمان معرفی هوک‌ها، می‌توانیم بدانیم چه زمانی برنامه/کامپوننت ما به طور کامل رندر شده است تا بتوانیم اقدامات خاصی را با استفاده از useEffect() hook. ما همچنین دسترسی به useRef() hook، که می توانیم از آن برای ارجاع مستقیم به یک عنصر خاص استفاده کنیم.
فرض کنید یک فرم با دو فیلد داریم و می خواهیم یکی از فیلدها تنظیم شود روی فوکوس بعد از رندر کامپوننت:
const App = () => {
return (
<div className='container'>
<form>
<input type="text" placeholder='This has focus' />
<input type="text" placeholder='No focus when we render' />
</form>
</div>
)
}
export default App;
بیایید با استفاده از یک مرجع به ورودی شروع کنیم useRef() واکنش نشان دهید hook. برای انجام این کار، ابتدا می خواهیم import useRef() از React ، ایجاد کنید ref و مقدار آن را به صورت پیش فرض null قرار دهید و سپس ایجاد شده را ضمیمه کنید ref به عنصر React ما از طریق ref صفت:
import { useRef } from 'react';
const App = () => {
const inputReference = useRef(null);
return (
<div className='container'>
<form>
<input type="text" ref={inputReference} placeholder='This has focus' />
<input type="text" placeholder='No focus when we render' />
</form>
</div>
)
}
export default App;
توجه داشته باشید: توجه داشته باشید که ما مرجع ایجاد شده را فقط به یکی از عناصر ورودی متصل کردیم، که همان عنصری است که می‌خواهیم آن را روی فوکوس تنظیم کنیم.
حالا بیایید به استفاده از آن ادامه دهیم useEffect() hook برای افزودن فوکوس به عنصر پس از رندر کردن برنامه:
import { useRef, useEffect } from 'react'
const App = () => {
const inputReference = useRef(null);
useEffect(() => {
// ...
}, ())
return (
<div className='container'>
<form>
<input type="text" ref={inputReference} placeholder='This has focus' />
<input type="text" placeholder='No focus when we render' />
</form>
</div>
)
}
export default App;
در کد فوق ، توجه کنید که ما واردات را وارد کردیم useEffect() hook و سپس از hook با یک آرایه وابستگی خالی (()) مطمئن شوید که فقط زمانی که جزء در ابتدا نصب می شود فعال می شود. در نهایت، برای تمرکز عنصر ارجاع شده، از طریق the به ref دسترسی خواهیم داشت current ویژگی و سپس پیوست کنید focus() روش:
useEffect(() => {
inputReference.current.focus();
}, ())
در این مرحله، هنگامی که برنامه یا مؤلفه ما رندر می شود، عنصر مرجع به طور خودکار متمرکز می شود:
import { useRef, useEffect } from 'react';
const App = () => {
const inputReference = useRef(null);
useEffect(() => {
inputReference.current.focus();
}, ());
return (
<div className='container'>
<form>
<input type="text" ref={inputReference} placeholder='This has focus' />
<input type="text" placeholder='No focus when we render' />
</form>
</div>
)
}
export default App;
روش تنظیم فوکوس روی عنصر پس از رندر در اجزای کلاس
تا کنون، روش تنظیم تمرکز را دیده ایم روی یک عنصر با یک مؤلفه عملکردی، اما یک نحو کاملاً متفاوت با مؤلفه های کلاس است، زیرا ما دیگر از هوک ها استفاده نمی کنیم زیرا آنها فقط در مؤلفه های عملکردی کار می کنند. در اجزای کلاس، ما ref خود را در داخل ایجاد می کنیم constructor() روش و استفاده از componentDidMount() روشی برای تنظیم عنصر ارجاع شده برای تمرکز پس از ارائه برنامه ما:
import React, { Component } from 'react';
export class App extends Component {
constructor(props) {
super(props);
this.inputReference = React.createRef();
}
componentDidMount() {
this.inputReference.current.focus();
}
render() {
return (
<div className='container'>
<form>
<input type="text" ref={this.inputReference} placeholder='This has focus' />
<input type="text" placeholder='No focus when we render' />
</form>
</div>
)
}
}
export default App;
در کد بالا از آن استفاده کردیم constructor() روش ایجاد یک مرجع، که ما آن را به عنصر ورودی متصل کردیم:
constructor(props) {
super(props);
this.inputReference = React.createRef();
}
سپس از آن استفاده کردیم componentDidMount() روش چرخه عمر ، که بسیار شبیه به useEffect() hook، برای اطمینان از تنظیم عنصر روی هنگامی که برنامه/مؤلفه ما را ارائه می دهد ، تمرکز کنید:
componentDidMount() {
this.inputReference.current.focus();
}
نتیجه
در این مقاله، ما یاد گرفتیم که چگونه یک عنصر را برای تمرکز با استفاده از یک فیلد ورودی تنظیم کنیم، زمانی که برنامه یا مؤلفه ما در هر دو مؤلفه Class و Functional ارائه شود. هر دو روش یکسان هستند اما نحو متفاوتی دارند زیرا دو نوع مؤلفه متفاوت هستند.
منتشر شده در 1403-01-06 05:58:03
