Ձևի տվյալների մշակում կոճակի սեղմումով React-ում

Նախորդ դասում մենք անում էինք այնպես, որ ինփուտում նիշ մուտքագրելիս պարբերությունում ակնթարթորեն երևար արդյունքը: Սա, իհարկե, գեղեցիկ տեսք ունի, բայց ունի թերություն:

Պատկերացնենք, որ մենք պետք է կատարենք որոշ «ծանր», ռեսուրսատար գործողություն: Ոչ շատ օպտիմալ է այն կատարել յուրաքանչյուր նիշ մուտքագրելիս - ավելի լավ է սպասել տվյալների վերջնական մուտքագրմանը ու ապա կատարել անհրաժեշտ գործողությունը մեկ անգամ ու արդյունքը ցուցադրել պարբերությունում:

Դրա համար մենք պետք է ավելացնենք կոճակ, որի սեղմումով կկատարվի մեր ռեսուրսատար գործողությունը: Այդ դեպքում մեզ մոտ կրկին յուրաքանչյուր ինփուտ կունենա իր սեփական սթեյթը, գումարած մեզ անհրաժեշտ է ևս մեկ սթեյթ գործողության արդյունքը գրանցելու և այն էկրանին ցուցադրելու համար:

Տեսնենք օրինակով: Ենթադրենք ունենք երկու ինփուտ և կոճակ: Կոճակի սեղմումով եկեք գտնենք ինփուտներում մուտքագրված թվերի գումարը:

Իրականացնենք.

jsxfunction 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>;
}

Կարելի է օգտագործել կրճատ տարբերակը.

jsxfunction 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>;
}