React - Formalar va boshqariladigan komponentlar

Reactda formalar bilan ishlash deganda form inputlarni holatini boshqarish va user interaction'ga to'g'ri javob qaytarish tushuniladi.

React'da formalar bilan ishlash uchun qo'llanma:

1. React komponent yaratish

function NameForm() {

return <div>Form</div>

}

2. Kerakli state'larni yaratish

import { useState } from "react"; //***

function NameForm() {

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

return <div>Form</div>

}

3. form ni o'zini yaratib olish

<form onSubmit={handleSubmit}> <label> Name: <input type="text" value={name} onChange={handleChange} /> </label> <button type="submit">Yuborish</button> </form>

4. Input o'zgarishlarni boshqarish - berilgan 'input'da o'zgarish ro'y berganda 'state' ni yangilash uchun 'event handler' yozish

const handleChange = (e) => { setName(e.target.value); };

5. form ni submit qilish. form to'ldirilib jo'natilganda React kodimizga event handler yozishimiz kerak.

const handleSubmit = (e) => { e.preventDefault(); alert(`Hello, ${name}!`); };

Natijaviy kod:

import { useState } from "react";

import React from "react";

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

const handleChange = (e) => { setName(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); alert(`Hello, ${name}!`); };

const handleReset = () => { setName(''); }

return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" value={name} onChange={handleChange} /> </label> <button type="submit">Yuborish</button> <button type="reset" onClick={handleReset}>Reset</button> </form> ); }

export default NameForm;

Shuningdek quyidagi kodda bir nechta inputlarni bitta event handler tomonidan yozish ko'rsatilgan:

import React, { useState, type ChangeEvent, type FormEvent } from "react";

function Form() {

const [formValues, setFormValues] = useState({ firstName: '', lastName: '' }); const handleformValues = (event: ChangeEvent<HTMLInputElement>) => {

setFormValues({

...formValues,

[event.target.name]: event.target.value

});

};

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {

event.preventDefault();

console.log('Form sumbitted');

console.log(formValues.firstName, formValues.lastName) }

return (

<form onSubmit={handleSubmit}>

<input type="text" name="firstName" value={formValues.firstName} onChange={handleformValues} />

<input type="text" name="lastName" value={formValues.lastName} onChange={handleformValues}/>

<p>Qiymati: {formValues.firstName} {formValues.lastName}</p>

<button type="submit">Submit</button>

</form>

);

} export default Form;

Controlled and uncontrolled components

Reactda form inputlar uchun yaratilgan komponentlar controlled - boshqariladigan va uncontrolled - boshqarilmaydigan turlarga bo'linadi.

Controlled components - form ma'lumotlari React state orqali boshqariladi.

function MyForm() { const [value, setValue] = useState(""); const handleChange = (event) => { setValue(event.target.value); }; return <input type="text" value={value} onChange={handleChange} /> }

Uncontrolled components - forma ma'lumotlari DOM ning o'zi tomonidan boshqariladi. Bu yerda komponent ishtirok etmaydi.

function MyForm() { const inputRef = useRef(); const handleSubmit = (event) => { event.preventDefault(); alert('A name was submitted: ' + inputRef.current.value); }; return ( <form onSubmit={handleSubmit}> <input type="text" ref={inputRef} /> <button type="submit">Submit</button>

</form> ); }