Ձևի տվյալների մշակում կոճակի սեղմումով 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 ֆորմատով: Կոճակի սեղմումով գտեք ամսաթվերի միջև տարբերությունը օրերով և արդյունքը ցուցադրեք պարբերությունում:
Փոփոխեք նախորդ խնդիրը այնպես, որ լռելյայնորեն ինփուտներում լինի ընթացիկ ամսաթիվը:
Տրված է ինփուտ և պարբերություն: Ինփուտում մուտքագրվում է թիվ: Ֆոկուսը կորցնելու դեպքում ցուցադրեք պարբերությունում մուտքագրված թվի թվանշանների գումարը:
Տրված է ինփուտ և պարբերություն: Ինփուտում մուտքագրվում է թիվ: Ֆոկուսը կորցնելու դեպքում ցուցադրեք պարբերությունում մուտքագրված թվի բաժանարարների արտադրյալը:
