Обработка на данни от формуляр при натискане на бутон в React

В предишния урок правехме така, че при въвеждане на символ в input полето в параграфа моментално да се появява резултат. Това, разбира се, изглежда добре, но има недостатък.

Представете си, че трябва да направим някаква "тежка", ресурсоемка операция. Не е много оптимално да я правим при всяко въвеждане на символ - по-добре е да изчакаме крайното въвеждане на данни и след това да изпълним необходимата операция веднъж и резултатът да се изведе в параграфа.

За това трябва да въведем бутон, при натискане на който ще се извършва нашата ресурсоемка операция. В този случай отново на всяко input поле ще съответства свое състояние, плюс още едно състояние ни трябва за записване на резултата от операцията и показването му на екрана.

Да разгледаме пример. Нека имаме две input полета и бутон. При натискане на бутона нека намерим сбора на числата, въведени в input полетата.

Нека реализираме:

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