1. تحديث نص الإدخال
import React, { useState } from 'react';
const handleInputChange = (setText) => (event) => {
setText(event.target.value);
};
const TextInput = () => {
const [text, setText] = useState('');
return (
<div>
<input type="text" value={text} onChange={handleInputChange(setText)} />
<p>{text}</p>
</div>
);
};
export default TextInput;
|
شرح: هذا المثال يوضح كيفية تحديث نص الإدخال وعرضه في الوقت الحقيقي.
2. تحديث قيمة رقمية
import React, { useState } from 'react';
const handleNumberChange = (setNumber) => (event) => {
setNumber(Number(event.target.value));
};
const NumberInput = () => {
const [number, setNumber] = useState(0);
return (
<div>
<input type="number" value={number} onChange={handleNumberChange(setNumber)} />
<p>{number}</p>
</div>
);
};
export default NumberInput;
|
شرح: هذا المثال يوضح كيفية تحديث قيمة رقمية وعرضها.
3. تحديث حالة التحقق من مربع الاختيار
import React, { useState } from 'react';
const handleCheckboxChange = (setChecked) => (event) => {
setChecked(event.target.checked);
};
const CheckboxInput = () => {
const [checked, setChecked] = useState(false);
return (
<div>
<input type="checkbox" checked={checked} onChange={handleCheckboxChange(setChecked)} />
<p>{checked ? 'Checked' : 'Unchecked'}</p>
</div>
);
};
export default CheckboxInput;
|
شرح: هذا المثال يوضح كيفية تحديث حالة التحقق من مربع الاختيار.
4. تحديث قيمة نصية متعددة الأسطر
import React, { useState } from 'react';
const handleTextareaChange = (setText) => (event) => {
setText(event.target.value);
};
const TextareaInput = () => {
const [text, setText] = useState('');
return (
<div>
<textarea value={text} onChange={handleTextareaChange(setText)} />
<p>{text}</p>
</div>
);
};
export default TextareaInput;
|
شرح: هذا المثال يوضح كيفية تحديث قيمة نصية متعددة الأسطر.
5. تحديث قيمة اختيار من قائمة منسدلة
import React, { useState } from 'react';
const handleSelectChange = (setOption) => (event) => {
setOption(event.target.value);
};
const SelectInput = () => {
const [option, setOption] = useState('');
return (
<div>
<select value={option} onChange={handleSelectChange(setOption)}>
<option value="">Select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<p>{option}</p>
</div>
);
};
export default SelectInput;
|
شرح: هذا المثال يوضح كيفية تحديث قيمة اختيار من قائمة منسدلة.
6. تحديث قيمة لون
import React, { useState } from 'react';
const handleColorChange = (setColor) => (event) => {
setColor(event.target.value);
};
const ColorInput = () => {
const [color, setColor] = useState('#000000');
return (
<div>
<input type="color" value={color} onChange={handleColorChange(setColor)} />
<p>{color}</p>
</div>
);
};
export default ColorInput;
|
شرح: هذا المثال يوضح كيفية تحديث قيمة لون وعرضها.
7. تحديث قيمة تاريخ
import React, { useState } from 'react';
const handleDateChange = (setDate) => (event) => {
setDate(event.target.value);
};
const DateInput = () => {
const [date, setDate] = useState('');
return (
<div>
<input type="date" value={date} onChange={handleDateChange(setDate)} />
<p>{date}</p>
</div>
);
};
export default DateInput;
|
شرح: هذا المثال يوضح كيفية تحديث قيمة تاريخ وعرضها.
8. تحديث قيمة وقت
import React, { useState } from 'react';
const handleTimeChange = (setTime) => (event) => {
setTime(event.target.value);
};
const TimeInput = () => {
const [time, setTime] = useState('');
return (
<div>
<input type="time" value={time} onChange={handleTimeChange(setTime)} />
<p>{time}</p>
</div>
);
};
export default TimeInput;
|
شرح: هذا المثال يوضح كيفية تحديث قيمة وقت وعرضها.
9. تحديث قيمة نطاق
import React, { useState } from 'react';
const handleRangeChange = (setRange) => (event) => {
setRange(event.target.value);
};
const RangeInput = () => {
const [range, setRange] = useState(50);
return (
<div>
<input type="range" value={range} onChange={handleRangeChange(setRange)} />
<p>{range}</p>
</div>
);
};
export default RangeInput;
|
شرح: هذا المثال يوضح كيفية تحديث قيمة نطاق وعرضها.
10. تحديث قيمة ملف
import React, { useState } from 'react';
const handleFileChange = (setFile) => (event) => {
setFile(event.target.files[0]);
};
const FileInput = () => {
const [file, setFile] = useState(null);
return (
<div>
<input type="file" onChange={handleFileChange(setFile)} />
<p>{file ? file.name : 'No file selected'}</p>
</div>
);
};
export default FileInput;
|
شرح: هذا المثال يوضح كيفية تحديث قيمة ملف وعرض اسم الملف المحدد.
تعليقات
إرسال تعليق