Forms

React Formlari

HTML kabi, React-da ham foydalanuvchilarga veb-sahifa bilan o'zaro aloqada bo'lish uchun formalar mavjud.

React-da Formalarni Qo'shish

React-da forma qo'shish boshqa elementlarni qo'shish kabi amalga oshiriladi:

Misol: Foydalanuvchilarga o'z ismlarini kiritish imkoniyatini beruvchi forma qo'shish:

function MyForm() {
  return (
    <form>
      <label>
        Ismingizni kiriting:
        <input type="text" />
      </label>
    </form>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Bu kod odatdagi tarzda ishlaydi: forma yuboriladi va sahifa yangilanadi.

Lekin React-da biz ushbu standart xatti-harakatni oldini olishni va formani React orqali boshqarishni xohlaymiz.

Formalarni Boshqarish

Formalarni boshqarish - bu ma'lumotlar o'zgarganida yoki yuborilganda qanday ishlov berishni anglatadi.

HTML-da forma ma'lumotlari odatda DOM tomonidan boshqariladi.

React-da esa forma ma'lumotlari odatda komponentlar tomonidan boshqariladi.

Ma'lumotlar komponentlar tomonidan boshqarilganda, barcha ma'lumotlar komponentning holatida (state) saqlanadi.

O'zgarishlarni boshqarish uchun onChange atributida hodisa (event) qo'shishimiz mumkin.

Har bir kirish (input) qiymatini kuzatib borish uchun useState Hook-dan foydalanamiz va butun ilova uchun "bitta haqiqat manbai"ni ta'minlaymiz.

Hooks bo'limida Hooks haqida qo'shimcha ma'lumot oling.

Misol: Kirishni boshqarish uchun useState Hook-dan foydalanish:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function MyForm() {
  const [name, setName] = useState('');
 
  return (
    <form>
      <label>
        Ismingizni kiriting:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
    </form>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Formalarni Yuborish

Forma yuborish jarayonini onSubmit atributida hodisa (event) qo'shish orqali boshqarishingiz mumkin:

Misol: Yuborish tugmasi va onSubmit atributida hodisa qo'shish:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function MyForm() {
  const [name, setName] = useState('');
 
  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Kiritgan ismingiz: ${name}`);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ismingizni kiriting:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <input type="submit" />
    </form>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Bir nechta Kirish (Input) Maydonlari

Bir nechta kirish maydonlarini boshqarish uchun har bir elementga name atributini qo'shish mumkin.

Holatni bo'sh ob'ekt bilan boshlaymiz.

Hodisani boshqarishda maydonlarni event.target.name va event.target.value sintaksisi yordamida olish mumkin.

Holatni yangilash uchun xususiyat nomi atrofida to'rtburchak qavslarni [bracket notation] ishlatamiz.

Misol: Ikki kirish maydoniga ega forma yozish:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function MyForm() {
  const [inputs, setInputs] = useState({});
 
  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs((values) => ({ ...values, [name]: value }));
  };
 
  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputs);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ismingizni kiriting:
        <input type="text" name="username" value={inputs.username || ''} onChange={handleChange} />
      </label>
      <label>
        Yoshingizni kiriting:
        <input type="number" name="age" value={inputs.age || ''} onChange={handleChange} />
      </label>
      <input type="submit" />
    </form>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Eslatma: Biz ikkala kirish maydoni uchun ham bir xil hodisa boshqaruvchisidan foydalanamiz. Har biri uchun alohida hodisa boshqaruvchisi yozishimiz mumkin, lekin bu bizga ancha toza kod beradi va React-da afzal ko'rilgan usuldir.

Textarea

React-da textarea elementi oddiy HTML-dan biroz farq qiladi.

HTML-da textarea qiymati <textarea> va </textarea> teglar orasidagi matn bo'lsa,

<textarea>
  Textarea kontenti.
</textarea>

React-da textarea qiymati value atributida joylashgan bo'ladi. Biz useState Hook-dan textarea qiymatini boshqarish uchun foydalanamiz:

Misol: Biror kontentga ega oddiy textarea:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function MyForm() {
  const [textarea, setTextarea] = useState('Textarea kontenti value atributida joylashgan');
 
  const handleChange = (event) => {
    setTextarea(event.target.value);
  };
 
  return (
    <form>
      <textarea value={textarea} onChange={handleChange} />
    </form>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Select

Select box yoki drop-down ro'yxati React-da HTML-dan biroz farq qiladi.

HTML-da tanlangan qiymat selected atributi yordamida belgilanadi:

HTML:

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

React-da tanlangan qiymat select tegida value atributi yordamida belgilanadi:

Misol: Tanlangan qiymati "Volvo" bo'lgan oddiy select box:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function MyForm() {
  const [myCar, setMyCar] = useState('Volvo');
 
  const handleChange = (event) => {
    setMyCar(event.target.value);
  };
 
  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Bu kichik o'zgarishlar bilan, React barcha kirish elementlarini bir xil tarzda boshqarishi mumkin.