Обработка на податоци од форма при кликнување на копче во React
Во претходната лекција правевме така што при внесување на симбол во влезно поле во параграфот моментално се појавуваше резултатот. Ова, се разбира, изгледа убаво, но има недостаток.
Да замислиме дека треба да направиме одредена "тешка", ресурсно интензивна операција. Не е многу оптимално да се прави при секој внесен симбол - подобро е да се почека конечниот внес на податоци и потоа да се изврши потребната операција еднаш и резултатот да се прикаже во параграф.
За ова треба да воведеме копче, при кликнување на кое ќе се извршува нашата ресурсно интензивна операција. Во таков случај, повторно на секое влезно поле ќе му одговара своја состојба, плус уште една состојба ни е потребна за запишување на резултатот од операцијата и негово прикажување на екранот.
Да погледнеме на пример. Нека имаме две влезни полиња и едно копче. При кликнување на копчето, ајде да ја најдеме сумата на броевите внесени во влезните полиња.
Да ја имплементираме:
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>;
}
Дадени се две влезни полиња, две копчиња и еден параграф. Нека во влезните полиња се внесуваат броеви. При кликнување на првото копче пронајдете ја сумата на броевите, а при кликнување на второто копче - производот. Резултатот прикажувајте го во параграфот.
Дадени се две влезни полиња, копче и параграф. Нека во влезните полиња се внесуваат датуми во формат 2025-12-31. При кликнување на копчето пронајдете ја разликата помеѓу датумите во денови и резултатот прикажете го во параграфот.
Модифицирајте ја претходната задача така што по дифолт во влезните полиња ќе стои тековниот датум.
Дадено е влезно поле и параграф. Во влезното поле се внесува број. При загуба на фокусот прикажете во параграфот сума на цифрите на внесениот број.
Дадено е влезно поле и параграф. Во влезното поле се внесува број. При загуба на фокусот прикажете во параграфот производ на делителите на внесениот број.
