React formalari

Xuddi HTML-da bo‘lgani kabi, React foydalanuvchilarga veb-sahifa bilan o‘zaro aloqada bo‘lish uchun shakllardan foydalanadi.

Reactda shakllar qo‘shish

Siz har qanday boshqa element kabi React bilan shakl qo‘shasiz:

function MyForm() {
  return (
    <form>
      <label>Enter your name:
        <input type="text" />
      </label>
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

Bu odatdagidek ishlaydi, shakl yuboriladi va sahifa yangilanadi.

Ammo bu, odatda, React-da sodir bo‘lishni xohlagan narsa emas.

Biz ushbu standart xatti-harakatni oldini olishni va Reactga shaklni boshqarishga ruxsat berishni xohlaymiz.

HTML formalari va React formalari

React-da <input> kabi elementlarni shakllantiring, <textarea> , va <select> an’anaviy HTMLdan biroz farq qiladi.

Standart HTMLda shakl elementlari foydalanuvchi kiritgan ma’lumotlar asosida o‘z qiymatini saqlab qoladi.

Masalan, <input type="text"> maydoni o‘z qiymatini kuzatib boradi HTML DOM da.

Reactda shakl elementining qiymati componentning state da saqlanadi. xususiyat va faqat setState () funksiyasi bilan yangilangan.

Boshqa so‘zlar bilan aytganda; React component holati orqali shakl ma’lumotlarini boshqarish usulini taqdim etadi, bu esa "boshqariladigan componentlar" deb nomlanuvchi narsalarga olib keladi.

Boshqariladigan componentlar

Boshqariladigan componentda shakl ma’lumotlari React componenti tomonidan boshqariladi.

Kirish elementining qiymati React holati tomonidan boshqariladi va bu qiymatdagi har qanday o‘zgarishlar holatni yangilaydigan voqea ishlovchilar orqali boshqariladi.

Ma’lumotlar componentlar tomonidan ishlov berilganda, barcha ma’lumotlar component holatida saqlanadi.

Biz useState Hook-dan har bir kiritilgan qiymatni kuzatib borish va butun dastur uchun "yagona haqiqat manbasini" taqdim qilish uchun foydalanishimiz mumkin.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  function handleChange(e) {
    setName(e.target.value);
  }

  return (
    <form>
      <label>Enter your name:
        <input
          type="text" 
          value={name}
          onChange={handleChange}
        />
      </label>
      <p>Current value: {name}</p>
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

Misol tushuntirildi:

1. React’dan useState Hook’ini import qiling:

import { useState } from 'react';

2. Kirish qiymatini ushlab turish uchun holat o‘zgaruvchisini va uni yangilash funksiyasini e’lon qiling:

const [name, setName] = useState("");

3. O‘zgartirish hodisasini boshqarish funksiyasini yarating:

function handleChange(e) {
  setName(e.target.value);
}

4. Kirish maydonining qiymatini holat o‘zgaruvchisiga va o‘zgartirish hodisasini boshqarish uchun onChange atributiga o‘rnating:

<input
  type="text" 
  value={name}
  onChange={handleChange}
/>

5. Qiymat yangilanayotganini ko‘rsatish uchun joriy qiymatni ko‘rsating:

<p>Current value: {name}</p>

Boshlang‘ich qiymatlar

Yuqoridagi misoldagi kiritish maydoniga boshlang‘ich qiymat qo‘shish uchun useState obyektiga qiymat qo‘shing:

function MyForm() {
  const [name, setName] = useState("John");

  ...