كيفية استخدام خطاف useState React

تحقق من بلديرد فعل الخطافات مقدمةأولاً ، إذا كنت جديدًا عليهم.

خطاف React الذي أستخدمه غالبًا هوuseState.

import React, { useState } from 'react'

باستخدامuseState()API ، يمكنك إنشاء متغير حالة جديد ، ولديك طريقة لتغييره.useState()يقبل القيمة الأولية لعنصر الحالة ويعيد مصفوفة تحتوي على متغير الحالة ، والدالة التي تستدعيها لتغيير الحالة. نظرًا لأنه يقوم بإرجاع مصفوفة نستخدمهاتدمير مجموعةللوصول إلى كل عنصر فردي ، مثل هذا:const [count, setCount] = useState(0)

إليك مثال عملي:

import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
ReactDOM.render(<Counter />, document.getElementById(‘app’))

يمكنك إضافة أكبر عدد ممكنuseState()المكالمات التي تريدها ، لإنشاء العديد من متغيرات الحالة كما تريد. فقط تأكد من تسميته في المستوى العلوي للمكون (وليس في ملفifأو في أي كتلة أخرى).

مثال على Codepen:

انظر القلمReact Hooks مثال رقم 1 للعدادبقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.