React bir nechta kiritish maydonlari

Bir nechta kirishlarni boshqarish

Shaklda bir nechta boshqariladigan kiritish maydonlariga ega bo‘lsangiz, ularning holatini quyidagi yo‘llar bilan boshqarishingiz mumkin:

1. Har bir kirish uchun alohida useState chaqiruvidan foydalanish.

2. Shakl maydonining barcha qiymatlarini ushlab turish uchun obyekt bilan bitta useState chaqiruvidan foydalanish.

Biz ikkinchi yondashuvdan foydalanamiz, chunki bu shakllar uchun keng tarqalgan.

Har bir kiritish maydonida noyob nom atributiga ega ekanligiga ishonch hosil qiling.

Bundan tashqari, holatni ishga tushirishda string o‘rniga obyektdan foydalaning. Agar kirish maydonlarida boshlang‘ich qiymat bo‘lmasa, bo‘sh obyektdan foydalaning.

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

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  return (
    <form>
      <label>First name:
      <input 
        type="text" 
        name="firstname" 
        value={inputs.firstname} 
        onChange={handleChange}
      />
      </label>
      <label>Last name:
        <input 
          type="text" 
          name="lastname" 
          value={inputs.lastname} 
          onChange={handleChange}
        />
      </label>
      <p>Current values: {inputs.firstname} {inputs.lastname}</p>
    </form>
  )
}

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

Misol tushuntirildi:

E’tibor berish kerak bo‘lgan birinchi narsa shundaki, bitta useState qo‘ng‘irog‘idan foydalanganda biz har qanday boshlang‘ich qiymatlarni saqlash uchun obyektdan foydalanamiz. Bunday holda, boshlang‘ich qiymatlarsiz biz bo‘sh obyektdan foydalanamiz:

const [inputs, setInputs] = useState({});

Keyinchalik, handleChange funksiyasi bir nechta kiritish maydonlarini boshqarish uchun yangilanadi.

Funksiyada biz e.target.name va e.target.value sintaksisidan foydalanib, voqea ishlov beruvchisidagi kiritish maydonlariga kiramiz.

Holatni yangilash uchun xususiyat nomi atrofida kvadrat qavslardan [qavs belgisi] foydalaning.

function handleChange(e) {
  const name = e.target.name;
  const value = e.target.value;
  setInputs(values => ({...values, [name]: value}))
}

Kirish qiymatlariga murojaat qilganda, state obyektining nomini, inputs ni, shuningdek kiritish maydonining nomini qo‘shamiz:

<input 
  type="text" 
  name="firstname" 
  value={inputs.firstname} 
  onChange={handleChange}
/>
<input 
  type="text" 
  name="lastname" 
  value={inputs.lastname} 
  onChange={handleChange}
/>
<p>Current values: {inputs.firstname} {inputs.lastname}</p>

Boshlang‘ich qiymatlar

Yuqoridagi misoldagi kiritish maydonlariga boshlang‘ich qiymatlarni qo‘shish uchun useState obyektiga tegishli kalit va qiymatlarni qo‘shing:

function MyForm() {
  const [inputs, setInputs] = useState({
    firstname: 'John',
    lastname: 'Doe'
  });

  ...