Апрацоўка дадзеных формы па націску на кнопку ў 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. Па націску на кнопку знайдзіце рознасць паміж датамі ў днях і вынік выведзіце ў абзац.
Мадыфікуйце папярэднюю задачу так, каб па змаўчанні ў інпутах стаяла бягучая дата.
Дадзены інпут і абзац. У інпут уводзіцца лік. Па страце фокусу выведзіце ў абзац суму лічбаў уведзенага ліку.
Дадзены інпут і абзац. У інпут уводзіцца лік. Па страце фокусу выведзіце ў абзац здабытак дзельнікаў уведзенага ліку.
