Обработка на данни от формуляр при натискане на бутон в React
В предишния урок правехме така, че при въвеждане на символ в input полето в параграфа моментално да се появява резултат. Това, разбира се, изглежда добре, но има недостатък.
Представете си, че трябва да направим някаква "тежка", ресурсоемка операция. Не е много оптимално да я правим при всяко въвеждане на символ - по-добре е да изчакаме крайното въвеждане на данни и след това да изпълним необходимата операция веднъж и резултатът да се изведе в параграфа.
За това трябва да въведем бутон, при натискане на който ще се извършва нашата ресурсоемка операция. В този случай отново на всяко input поле ще съответства свое състояние, плюс още едно състояние ни трябва за записване на резултата от операцията и показването му на екрана.
Да разгледаме пример. Нека имаме две input полета и бутон. При натискане на бутона нека намерим сбора на числата, въведени в input полетата.
Нека реализираме:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
Може да се използва съкратен вариант:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
Дадени са две input полета, два бутона и параграф. Нека в input полетата се въвеждат числа. При натискане на първия бутон намерете сбора на числата, а при натискане на втория бутон - произведението. Резултатът се извежда в параграфа.
Дадени са две input полета, бутон и параграф. Нека в input полетата се въвеждат дати във формат 2025-12-31. При натискане на бутона намерете разликата между датите в дни и резултатът се извежда в параграфа.
Модифицирайте предходната задача така, че по подразбиране в input полетата да стои текущата дата.
Дадено е input поле и параграф. В input полето се въвежда число. При загуба на фокус се извежда в параграфа сумата от цифрите на въведеното число.
Дадено е input поле и параграф. В input полето се въвежда число. При загуба на фокус се извежда в параграфа произведението на делителите на въведеното число.
