یکی از شناخته شده ترین قلاب های React، قلاب useState() است. به شما امکان می دهد یک متغیر حالت را به جزء خود اضافه کنید. قلاب useState() می تواند به راحتی رشته ها، آرایه ها، اعداد، اشیاء و موارد دیگر را در خود نگه دارد.

در این مقاله قصد داریم با قلاب useState() آشنا شویم و کاربرد آن را با سه مثال مختلف نشان دهیم: یک دکمه با رندر شرطی، مدیریت فرم و شمارنده معروف.

پیش نیازها

برای درک ایده های پشت آنچه در این آموزش ایجاد می کنید، به دانش اولیه HTML، CSS و جاوا اسکریپت نیاز دارید.

همچنین داشتن دانش مبتدی از React مفید است.

در نهایت، به یک IDE، ترجیحاً کد VS نیاز دارید.

هنگامی که برنامه React خود را راه اندازی و اجرا کردید، آماده استفاده از useState هستید. برای شروع، باید useState() مانند شکل زیر از React وارد کنید:

 import { UseState } from 'react';

useState() چگونه کار می کند؟

قلاب useState() با مدیریت و مدیریت وضعیت در برنامه های شما کار می کند.

قلاب useState() اولین مقدار (اولیه) متغیر state را به عنوان آرگومان خود می گیرد. سپس مقدار دوم وضعیت شما را تنظیم می کند، به همین دلیل است که همیشه به عنوان setState شروع می شود. خب این چطور کار میکند؟

 const [state, setState] = useState(initial values goes here) const [calories, setCalories] = useState(initial value of calories)

در مورد اولین رندر، با استفاده از تابع set ، حالت اولیه را برمی‌گرداند و به مقدار متفاوتی در طول رندر مجدد به‌روزرسانی می‌شود.

رندر شرطی با قلاب useState()

این مثال به شما امکان می دهد بسته به دو شرط، وضعیت را به روز کنید: آیا کاربر وارد شده است یا نه. این همچنین توضیح می دهد که چرا حالت اولیه روی false تنظیم شده است، به این معنی که کاربر وارد نشده است.

شما می خواهید یک دکمه ورود ایجاد کنید که از هوک useState() برای ارائه دو نتیجه متفاوت استفاده می کند.

یکی دکمه ورود به سیستم با پیامی است که از کاربر می‌خواهد وارد شود. دیگری دکمه‌ای است که پس از ورود کاربر به سیستم، به آنها امکان خروج از سیستم را می‌دهد.

 import React from 'react' const Signin = () => { return ( <div> <div> <button type="button">Sign Out</button> <p>Welcome back, good to see you in here<p> </div> <div> <button type="button">Sign In</button> <p>Please Sign in</p> </div> </div> ) } export default Signin;

برای پیاده سازی عملکردهای ورود و خروج از سیستم، باید useState() وارد کنید. سپس باید از رندر شرطی استفاده کنید تا مشخص کنید که دکمه ها چگونه به یک کلیک پاسخ می دهند.

 import React, { useState } from 'react' const Signin = () => { const [signedin, setSignedin] = useState(false) const handleSignin = () => { setSignedin(true) } const handleSignout = () => { setSignedin(false) } return ( <div> { signedin ? ( <div> <button type="button" onClick={handleSignout}>Sign Out</button> <p>Welcome back, good to see you in here</p> </div>) : (<div> <button type="button"onClick={handleSignin}>Sign In</button> <p>Please Sign in</p> </div>) } </div> ) } export default Signin;

در کد بالا چه اتفاقی می افتد؟

ابتدا یک متغیر با قلاب useState() ایجاد کردید که signedin را روی false قرار می دهد. چرا؟ زیرا در بارگذاری اول، نمی‌خواهید کاربر وارد سیستم شود. اما وقتی روی دکمه ورود کلیک کرد، می‌تواند وارد شود.

همچنین توجه داشته باشید که قلاب useState() را در بالا وارد کرده اید.

سپس متغیرهایی ایجاد کردید که به ترتیب ورود، خروج از سیستم، و تنظیم تابع set را روی true و false انجام می‌دهند - که handleSignin و handleSignout هستند.

پس از آن، یک کنترل کننده onClick ایجاد کردید که به کلیک روی دکمه گوش می دهد و یک عمل را راه اندازی می کند. این عمل توسط اپراتور شرطی (سه تایی) هدایت می شود.

پس عملگر سه تایی چگونه کار می کند؟ در اینجا چیزی است که MDN باید بگوید :

" عملگر شرطی (سه تایی) تنها عملگر جاوا اسکریپت است که سه عملوند می گیرد: یک شرط به دنبال علامت سوال ( ? )، سپس یک عبارت برای اجرا اگر شرط باشد.

این عملگر اغلب به عنوان جایگزینی برای عبارت if...else استفاده می شود."

به این معنی که اگر روی دکمه ورود کلیک کنید، وارد شده و پیام خوشامدگویی را دریافت می کنید. هنگامی که روی دکمه خروج کلیک کردید، با پیام "لطفا وارد شوید" از شما خواسته می شود وارد شوید.

نحوه استفاده از قلاب useState() در برنامه React Counter

این مثال نشان می دهد که چگونه می توانید از useState() برای به روز رسانی وضعیت خود از طریق کلیک استفاده کنید.

ایده پشت این شمارنده ساده این است که کلیک های شما شمارش می شود. پس ، اگر روی دکمه ۱۲ بار کلیک کنید، شمارنده به ۱۲ به روز می شود. توجه داشته باشید که دکمه در هر کلیک/شمارش به روز می شود.

 import React from 'react'; const Newcounter = () => { return ( <div> <button type="button">You will see the count here</button> </div> ) } export default Newcounter;

برای عملکردی کردن شمارنده، باید از قلاب مانند شکل زیر استفاده کنید (و یک بار دیگر فراموش نکنید که قبل از استفاده از useState() را وارد کنید):

 const [count, setCount] = useState(0)

سپس متغیر دیگری ایجاد می کنید که تعداد را از ۰ به ۱، ۲، ۳ افزایش می دهد.

 const incrementCount = () => { setCount (count + 1) }

اکنون می توانید با استفاده از کنترل کننده onClick مطابق شکل زیر وارد شوید و تعداد افزایش یافته را برگردانید:

 import React, { useState } from 'react'; const Newcounter = () => { const [count, setCount] = useState(0) const incrementCount = () => { setCount(count + 1) } return ( <div> <button type="button" onClick={incrementCount}>You clicked {count} times</button> </div> ) } export default Newcounter;

نحوه استفاده از قلاب useState() در یک فرم در React

فرم‌ها از useState() استفاده می‌کنند و به توسعه‌دهنده اجازه می‌دهند یک حالت خالی را تنظیم کند که از تابع set برای رسیدگی به آنچه کاربر به عنوان ورودی خود تایپ می‌کند استفاده می‌کند.

در اینجا، شما اساساً می خواهید نام و ایمیل کاربران را از طریق یک فرم جمع آوری کنید و سپس اطلاعات را ارسال کنید.

در زیر یک فرم ساده برای نشان دادن این است که چگونه قلاب useState() این امکان را فراهم می کند.

در اینجا فرمی است که با آن کار خواهید کرد:

 import React from 'react' const Theform = () => { return ( <div> <form> <input type="text" placeholder="enter your name" required /> <input type="email" placeholder="enter your email" required /> <button type="submit">Submit</button> </form> </div> ) } export default Theform;

شما باید قلاب را به فایل خود وارد کنید. پس از آن، از قلاب useState استفاده کنید تا نام و ایمیل را null کنید، همانطور که منتظر می‌مانید کاربر جزئیات خود را وارد کند.

پس از آن، یک تابع جهت دار با handleSubmit ایجاد خواهید کرد که متد preventDefault() را اجرا می کند. console.log نام کاربر و ایمیل او را ثبت کنید تا بتوانید این جزئیات را با استفاده از کنترل کننده رویداد onSubmit() دریافت کنید.

پس از انجام این کار، می‌توانید از تابع set هم برای نام و هم برای ایمیل استفاده کنید تا تغییری در ورودی را هدف قرار دهید و مقدار ورودی را که به عنوان user و email در قلاب useState() مقداردهی اولیه کرده‌اید، دریافت کنید.

به یاد داشته باشید که قلاب useState از تابع set برای رندر مجدد استفاده می کند. در این، شما مقادیر جدیدی را که کاربر در فرم اضافه کرده است، دوباره رندر می کنید. به همین دلیل است که مقدار را در ورودی خود به عنوان value={user} تنظیم می‌کنید.

 import React, { useState }from 'react' const Theform = () => { const [user, setUser] = useState('') const [email, setEmail] = useState('') const handleSubmit = (e) => { e.preventDefault() console.log(user, email) } return ( <div> <form onSubmit={handleSubmit}> <input type="text" placeholder="enter your name" onChange={(e) => {setUser(e.target.value)}} value ={user} required /> <input type="email" placeholder="enter your email" onChange={(e) => {setEmail(e.target.value)}} value={email} required /> <button type="submit">Submit</button> </form> </div> ) } export default Theform;

نتیجه

در این مقاله با در نظر گرفتن سه مثال مختلف با قلاب useState() در React آشنا شدید. به یاد داشته باشید، درست مانند سایر React Hook ها، قلاب useState() از قوانین کلی React Hook تبعیت می کند.