Түймені басу арқылы 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>;
}
Қысқартылған нұсқasын қолдануға болады:
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 пішіміндегі күндер енгізілсін. Түймені басу арқылы күндер арасындағы айырмашылықты күндермен тауып, нәтижені абзацта шығарыңыз.
Алдыңғы тапсырманы енгізу өрістерінде әдепкі бойынша ағымдағы күн тұруы үшін өзгертіңіз.
Енгізу өрісі және абзац берілген. Енгізу өрісіне сан енгізіледі. Фокус жоғалту кезінде енгізілген санның цифрларының қосындысын абзацта шығарыңыз.
Енгізу өрісі және абзац берілген. Енгізу өрісіне сан енгізіледі. Фокус жоғалту кезінде енгізілген санның бөлгіштерінің көбейтіндісін абзацта шығарыңыз.
