В предыдущем уроке мы делали так, чтобы при вводе символа в инпут в абзаце мгновенно появлялся результат. Это, конечно же, смотрится красиво, но имеет недостаток.
Представим себе, что нам нужно сделать некоторую "тяжелую", ресурсоемкую операцию. Не очень оптимально делать ее на каждый ввод символа - лучше дождаться окончательного ввода данных и потом выполнить нужную операцию один раз и результат вывести в абзац.
Для этого нам нужно ввести кнопку, по нажатию на которую будет совершаться наша ресурсоемкая операция. В таком случае у нас опять каждому инпуту будет соответствовать свой стейт, плюс еще один стейт нам нужен для записи результата операции и отображения его на экран.
Посмотрим на примере. Пусть у нас есть два инпута и кнопка. По нажатию на кнопку давайте найдем сумму чисел, введенных в инпуты.
Реализуем:
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. По нажатию на кнопку найдите разницу между датами в днях и результат выведите в абзац.
Модифицируйте предыдущую задачу так, чтобы по умолчанию в инпутах стояла текущая дата.
Дан инпут и абзац. В инпут вводится число. По потери фокуса выведите в абзац сумму цифр введенного числа.
Дан инпут и абзац. В инпут вводится число. По потери фокуса выведите в абзац произведение делителей введенного числа.