App_React

1
import React, { useState } from "react";
2

3
const Counter = () => {
4

5
  const [count, setCount] = useState('')
6
  const [value, setValue] = useState('Текст в инпуте')
7

8
  function increment() {
9
   setCount(count + 1)
10
  } 
11

12
  function decrement() {
13
   setCount(count - 1)
14
  }
15
   return(
16
     <div>
17
            <h1>{count}</h1> 
18

19
            <h1>{value}</h1>
20
            <input 
21
                  type="text" 
22
                  value={value} 
23
                  //* двустороннее связывание (достаем значение и помещаем его в состоние)- функци отслеживает, что пользователь вводит в поле ввода
24
                  //* колбэки для соытий первым параметром принимают even, у коорых есть поле target(сам дом-элемент) и value(значение, которое находится в дом элементе)
25
                  //* реализовали связывание состояние со значением, которое нахоится в инпуте
26
                  //* пишем в инпут - отражается в заголовке - доились синхронизации
27
                  //! Управляеме компоненты - всегда можем изменить значение омпонента, изменив состояние
28
                  onChange={(e) => setValue(e.target.value)}/> 
29

30
            <button onClick={increment}>Increment</button>
31
            {/* <button onClick={() => likes += 1}>Increment</button> */}
32
            <button onClick={decrement}>Decrement</button>
33
            {/* <button onClick={() => likes -= 1}>Decrement</button> */}
34
     </div>
35
   )
36
}
37
export default Counter;
38